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

Posted

技术标签:

【中文标题】如何根据 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();
      

【讨论】:

以上是关于如何根据 vue.js 中的自定义权限授予访问路由的权限?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 Vue.js 2 中的自定义指令中获取文字表达式?

如何授予 AKS 通过 terraform 访问 ACR 的权限?

如何在 Vue.js 2 的自定义指令中进行双向绑定?

如何根据实体类型授予权限?

如何使用 FLAG_GRANT_READ_URI_PERMISSION 授予对自定义内容提供者的临时访问权限

Laravel 5.5 Entrust使用中间件授予路由组权限失败