nuxt3 如何路由守卫

在 Nuxt 3 中，路由守卫（route guards）可以帮助你在用户访问特定页面时进行拦截和处理，比如检查身份认证、授权，或者执行其他自定义逻辑。Nuxt 3 提供了几种方式来定义路由守卫，包括使用 middleware 和 useRouter API。

1. 使用 middleware 实现路由守卫

在 Nuxt 3 中，路由守卫的推荐方式是使用 middleware。中间件允许你在请求进入某个页面之前，进行一些处理或验证。

步骤 1: 创建 Middleware

1. 在 middleware 目录下创建一个新的文件，例如 auth.js：

   // middleware/auth.js
   export default defineNuxtRouteMiddleware((to, from) => {
     const user = useState('user') // 假设你从状态中获取用户信息
   
     if (!user.value) {
       // 用户未登录，重定向到登录页
       return navigateTo('/login')
     }
   })
   

   • defineNuxtRouteMiddleware 是一个用于定义路由中间件的函数。
   • to 和 from 是路由的目标和来源信息。
   • useState 可以用来访问全局状态，在这个例子中用来检查用户是否已登录。
   • navigateTo 用于进行页面重定向。

步骤 2: 在页面或布局中使用 Middleware

你可以在单个页面、布局或全局应用这个中间件。

在单个页面中使用：

在页面组件中，使用 definePageMeta 配置中间件：

<script setup>
definePageMeta({
  middleware: 'auth'  // 使用刚刚创建的 auth 中间件
})
</script>

在布局中使用：

在布局组件中，使用 defineLayoutMeta 配置中间件：

<script setup>
defineLayoutMeta({
  middleware: 'auth'  // 使用 auth 中间件
})
</script>

全局应用 Middleware：

如果你希望将中间件应用到所有页面，可以在 nuxt.config.ts 中全局设置：

export default defineNuxtConfig({
  router: {
    middleware: ['auth']  // 所有路由都会使用 auth 中间件
  }
})

2. 使用 useRouter 和 beforeEach 实现路由守卫

Nuxt 3 默认使用 Vue Router，因此你也可以直接使用 Vue Router 提供的钩子来定义路由守卫。比如，使用 beforeEach 监听路由变化。

在 Nuxt 3 中，你可以在 app.vue 或其他合适的地方使用 useRouter：

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

router.beforeEach((to, from) => {
  const user = useState('user') // 假设你从状态中获取用户信息

  if (!user.value && to.name !== 'login') {
    // 如果用户未登录，且目标路由不是登录页，则重定向到登录页
    return { name: 'login' }
  }
})
</script>

这里的 beforeEach 会在每次路由跳转时被触发，你可以在其中进行认证检查、权限验证等操作。

3. 使用 onBeforeRouteLeave 和 onBeforeRouteUpdate

在页面组件中，Vue Router 提供了一些生命周期钩子，如 onBeforeRouteLeave 和 onBeforeRouteUpdate，可以用来处理路由切换前的逻辑。

• onBeforeRouteLeave: 在当前路由离开时执行（例如，用户离开当前页面时）。
• onBeforeRouteUpdate: 在同一路由下参数变化时执行。

示例：

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 在离开当前页面时执行
onBeforeRouteLeave((to, from) => {
  // 例如提示用户保存未完成的表单
  if (confirm('你确定要离开当前页面吗？')) {
    // 允许离开
    return true
  } else {
    // 阻止离开
    return false
  }
})

// 在路由参数更新时执行
onBeforeRouteUpdate((to, from) => {
  console.log('路由参数已更新', to.params)
})
</script>

4. 使用 useState 和 navigateTo 进行授权检查

你可以结合 useState 和 navigateTo 来检查用户的登录状态，并在需要时重定向。

示例：

export default defineNuxtRouteMiddleware((to) => {
  const user = useState('user')

  // 如果用户未登录，重定向到登录页面
  if (!user.value && to.name !== 'login') {
    return navigateTo('/login')
  }
})

总结

在 Nuxt 3 中，路由守卫的常用方法包括：

1. 使用 Middleware：

   • 推荐的方式，适合全局和特定页面的路由控制。
   • defineNuxtRouteMiddleware 可以用来拦截路由，进行认证、授权、权限验证等。

2. 使用 beforeEach 路由守卫：

   • 使用 Vue Router 提供的 API 来处理路由跳转前的逻辑，适合在 Nuxt 应用中进行全局的路由控制。

3. 使用 onBeforeRouteLeave 和 onBeforeRouteUpdate：

   • 用于在页面组件中处理路由离开或参数更新时的逻辑。

通过这些方式，你可以灵活地控制 Nuxt 3 应用中的路由访问，实施必要的逻辑和验证。