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

Posted 2023-02-16

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

【英文标题】：how to give permission accessing a routes according to custom permission in vue.js?

【发布时间】：2020-04-04 09:03:25

【问题描述】：

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

【参考方案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();