RBAC

Teiyou666
145 阅读3分钟

RBAC基于角色的权限分配

image.png 路由权限 菜单权限（决定了当前用户左侧侧边栏有哪些导航） 1在VueX中定义一个prommision.js模块，把筛选之后的路由表放到stase中，SiderBar侧边栏组件就可以通过getter拿到这个数据，然后通过v-for遍历

按钮级别权限管理（细粒度的权限管理）

混入

image.png

前端权限控制怎么做（动态路由怎么实现）

什么是前端权限控制：权限控制要实现的效果是拥有不同角色的账号登录之后看到的菜单和能访问的页面是不一样的，说白了就是路由是动态加载的(addRoutes)，菜单是动态渲染的(v-for)

路由权限（决定了当前用户能看哪些页面）

  1. 本质就是利用了一个 addRoutes 这个 api 来实现的
  2. 具体思路
  3. 前端维护了两份路由表，一份是静态路由表，一块是动态路由表，默认路由实例挂载的只有静态路由表
  4. 用户登录成功之后，会得到一份菜单的数组，我们根据这个菜单数组对动态路由表进行筛选(filter)，路由实例通过 addRoutes 把这个加进去，类似数组合并

菜单权限（决定了当前用户左侧侧边栏有哪些导航）

  1. 在 vuex 里面定义一个 permission.js 模块，把筛选之后路由表放到 state 中，这样 SideBar.vue 侧边栏组件就可以通过 getter 拿到这个数据，然后通过 v-for 遍历

面试官可能还会继续问 按钮级别的权限控制（打开知乎，这个文章是你写的，底部会有一个删除和编辑，不是你写，没有这二个按钮）

实现的思路：

  1. 用户登录成功之后，会得到一份权限点的数组(points),创建一个全局的混入 mixin,在里面定义一个方法 checkPermission，获取到 vuex 中的 points，和当前页面中这个按钮进行判断，看这个按钮需要权限点是不是在这个 points 里面，如果不是就 disabled
// vuex/getters.js
points: (state) => state.user.userInfo.roles.points;//权限点数组 登录成功之后在userInfo中拿到的

//这是一个混入mixin 
export default {
  methods: {
    // 提供一个权限点，看是不是在数组中，返回值是布尔值
    checkPermission(point) {
      return !this.$store.getters.points.includes(point);
    },
  },
};


// main.js 注册全局混入
import mixins from './mixins'
Vue.mixin(mixins)

<el-button type="primary" :disabled="checkPermission('ADD-SOCIAL')">添加</el-button>

总结 权限控制怎么做

三大块
菜单 用户登录之后 左侧的侧边栏导航是根据当前用户的权限动态渲染出来的， 菜单时根据当前用户自己的路由表动态渲染出来的

路由 用户只能看到自己由权限访问的页面，没有权限的页面返回404，不同的账号可以看到的页面是不同的，有的可以看到全部，由的可以看到一部分 前端路由时维护了2份路由表，一份静态路由表，直接在路由实例上挂载，直接显示，一份动态路由表，根据用户权限添加，用addRoudes添加 按钮 某个页面上由新增，删除，修改按钮 不投标方的账号登录之后，有的可以操作所有功能，有的不可以操作 ，大致效果有2中 隐藏 或者 disibel 登录成功会得到一份权限点的列表，记录了各个页面能不能操作的标识，我们定义一个mixin混入，在里面定义一个方法，在里面判断当前权限点是不是在用户的权限点列表中，如果在就可以用，如果不在就禁用货隐藏

路由和菜单权限控制：开始 --> 登录 --> 登录成功获取当前用户权限列表 --> 根据权限列表生成完整的路由表（包含静态路由表+筛选之后的动态路由表）--> 进入带有菜单的页面,根据完整路由表动态渲染左侧菜单

image.png

avatar
文章
阅读
粉丝