使用RBAC实现不同的权限显示不同的页面和按钮

JIA-Fury

于 2021-08-31 19:01:20 发布

阅读量822

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/JIAFury/article/details/120018252

版权

本文介绍了如何使用RBAC（基于角色的权限访问控制）实现动态权限展示，包括动态生成菜单、动态添加路由和处理刷新后的问题。通过在vue.js中应用RBAC，能够根据用户角色显示不同的页面和按钮，解决了路由重复和页面异常的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是RBAC？

全称：role-based access control 基于角色的权限访问控制

作用：实现访问控制

RBAC的三个组成部分

user（用户）：每个用户都有不同且唯一的ID，用来进行识别，并被授予不同的角色
role（角色）：不同的角色具有不同的权限
jurisdiction（权限）：访问权限

动态生成左侧菜单栏的菜单

router.addRoutes([路由配置对象])
或者:
this.$router.addRoutes([路由配置对象])

动态添加路由配置

在router中删除动态路由部分

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // routes: constantRoutes
  // 合并动态和静态的路由  , ...asyncRoutes
- routes: [...constantRoutes, ...asyncRoutes]
+ routes: [...constantRoutes]
})

使用addRoute