Nuxt 3 在中间件中使用可组合

Question

我想通过检查用户是否登录来保护路由，但是：

我无法读取可组合值，
我不确定我的中间件是否得到了正确的主体。

我的可组合项：

// composable/useAuth.js
const useAuth = () => {

  // user login, sign out, sign up logic

  const isLoggedIn = () => {
    return !!user.value
  }

  return {
    isLoggedIn
  }
}

export default useAuth

我的中间件：

// middleware/check-admin.js
export default defineNuxtRouteMiddleware((to, from) => {
  const { isLoggedIn } = useAuth()

  console.log(isLoggedIn); // <- Screenshot

  if (isLoggedIn) {
    return navigateTo(`/albums/${to.params.id}/edit`)
  } else {
    return navigateTo('/')
  }
})

我的控制台记录了一个方法体。但我期待一个虚假或真实的价值：

问题：

如何从我的可组合项中读取布尔值以通过中间件内部的测试？
如果用户没有凭据，可以使用 navigateTo 中止路由吗？文档说，我可以使用 abortNavigation()

Answer 1

您返回了函数，但绝不会在末尾使用 () 调用它。

这样试试：

export default defineNuxtRouteMiddleware((to, from) => {
  const { isLoggedIn } = useAuth()

  console.log(isLoggedIn()); // <- Screenshot
  // `from.name === login` will trigger rediraction for example if user want to login but he is already logged in.
  // form.name will be necesery if you use suffix `.global` in file name.
  if (isLoggedIn() && to.params.id && !from.params.id && from.name === `login`) {
    return navigateTo(`/albums/${to.params.id}/edit`)
  }
  if (!isLoggedIn() && form.params.id) {
    return abortNavigation()
  }
})

使用 to 值了解用户想要导航的位置。

如果您没有在中间件文件中使用 .global 后缀，您可以选择在组件中的何处使用中间件。

<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>

Nuxt 3 在中间件中使用可组合

Nuxt 3 use composable in middleware

nuxt.js

vue-router

vuejs3

middleware

nuxtjs3

问题：