Nuxt 中的验证路由

在 Nuxt 中，我们可以使用 middleware 来实现路由的验证。这个中间件会在页面加载前执行，以检查用户是否有权限访问该页面。

创建 middleware

在 middleware/ 目录下创建一个名为 auth.js 的文件，并进行以下设置：

export default function ({ store, redirect }) {
  if (!store.state.auth) {
    return redirect('/')
  }
}

这个中间件通过检查存储在 Vuex 中的 auth 数据，来验证用户是否有权限访问该页面。如果 auth 不存在，则会将用户重定向到主页。

绑定 middleware

在路由配置文件中（通常是 routes.js 或 index.js）中，我们可以将 middleware 与每个路由关联起来。

export default [
  {
    path: '/protected',
    component: () => import('pages/Protected.vue'),
    middleware: 'auth'
  }
]

对于需要验证的路由，我们只需要在 middleware 属性中指定中间件的名称即可。

在页面中使用 middleware

在页面中，我们可以使用 $middleware 对象来处理与路由关联的 middleware。它提供了以下方法：

• check(name: string) ：检查中间件是否可用
• pause(name: string) ：暂停中间件直到下一个路由跳转
• run(name: string) ：执行中间件

<template>
  <div>
    <h2>My Protected Page</h2>
    <p v-if="$middleware.check('auth')">This page is protected by authorization middleware.</p>
  </div>
</template>

<script>
export default {
  middleware: 'auth',
  asyncData ({ $middleware }) {
    $middleware.pause('auth')
    return {}
  },
  mounted ({ $middleware }) {
    $middleware.run('auth')
  }
}
</script>

这里，在页面级组件中我们使用了 middleware 属性来指定执行的 middleware 名称。另外，我们还在 asyncData 中使用了 pause('auth') 暂停了中间件，然后在 mounted 中使用了 run('auth') 来重新唤醒中间件。

现在，在 Nuxt 应用程序中，您已经了解了如何使用 middleware 来实现路由验证。