如何将中间件分配给特定的路由组？

Question

比方说，我有这块路由，到目前为止，我只知道中间件可以通过nuxt-config.js分配（全局）或每条路由（独立）。

页面

 - index.vue
 - goSomeWhere.vue
 - goThisWay.vue
 - admin
    - index.vue
    - goThere.vue
    - goHere.vue

我想为每一个人分配一个中间件。/admin 路由，那么有没有其他的方法可能适合我呢？

Answer 1

当然，验证一个路由块的最简洁的方法是使用一个全局的中间件，目标是任何以admin开头的路由。

你可以在中间件文件夹里面设置一个文件，根据条件定义你需要的重定向。很明显，你要阻止任何不是以管理员级别用户登录的人的管理员路由。要做到这一点，你应该在你的商店中设置任何管理员用户的属性，如 "admin"，如果你需要设置级别，你可以分配一个值为admin1，admin2等。为了简单起见，让我们假设任何授权用户登录时都有一个属性为 admin = true; 在他们的用户对象中设置的商店。

然后，你应该在中间件文件夹中创建一个文件，我们称它为 "uth.js"。

export default function ({store, redirect, route}) {

  const userIsAdmin = !!store.state.user.admin;
  const urlRequiresAuth = /^\/admin(\/|$)/.test(route.fullPath)
  if (urlRequiresAuth && !userIsAdmin) {
      return redirect('/')
  }
  return Promise.resolve
}

它只是简单地检查用户是否将admin设置为true 以及请求的路由是否需要授权。如果用户未被授权，它将重定向到你的索引页。

你需要在nuxt.config.js中注册你的中间件文件。

...

router: {
  middleware: ['auth'];
},

...

然后你就可以开始了