NUXT 3在中间件中使用可复合

Question

我想通过检查用户是否已登录来守护一条路线，但是：

1. 我无法阅读可合价的值，
2. 我不确定我的中间件是否合适。

---

我的组合：

// 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()
  }
})

使用值以了解用户要在哪里导航。

如果您不使用中间件文件中的.global后缀，则可以选择在组件中使用中间件的位置。

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