前端权限管理如何实现

Vue 实现

目前主要的设计思路都是基于Vue-Router配合后端返回角色权限定义进行设计。后端返回角色对应路由权限数据，返回形如 { role: ‘admin’, permissions: [‘Order’, …] }，
其中permissions对应前端路由页面name，通过这样的形式后端动态返回该角色所具备的权限列表，前端配合router.addRoutes动态注册路由，达到路由级的权限控制。

在后台管理系统中对角色进行权限的分配（包括页面权限和接口权限），页面权限可以根据vue-router的api动态的生成路由表，而接口权限就需要后端的同学去进行校验。

在Vue中权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的。

1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4. 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。