如何根据 vue.js 中的自定义权限授予访问路由的权限？

Question

我有五个班级。例如第 1 类到第 5 类。管理员从 Admin Dashboard 将学生分配到不同的班级。我想要的是，如果学生无权访问特定班级，学生将无法访问班级组件。

Answer 1

在 vue js 中，最简单的方法是在路由上使用 meta 标签：

{
   path: "/only-students-from-class-a",
   meta: {studentClass: 'a'}
}

然后在让用户真正看到页面之前，使用全局路由器保护检查当前用户是否属于存储在元数据中的类。

router.beforeEach((to, from, next) => {
  const userClass = store.state.user.studentClass;
  if (to.meta.studentClass && userClass !== to.meta.studentClass) 
      next('/login')
  else next()
})

您也可以根据路线执行此操作：

{
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
       const studentClass = store.state.user.studentClass;
       if(studentClass !== 'class5') next('/login')
       else next();
      }
}