vue-element-admin教程之实现先后端动态权限

vue-element-admin是一个后台前端解决方案，使用它能够快速进行企业后台的搭建，今天想聊的就是如何基于这款框架实现咱们的后台动态权限验证。

后端接口层，须要完成用户的最终鉴权，也就是当客户端请求咱们的api的时候，后台须要在拦截器层正确判别用户有无该接口的访问权限，这是与前端无关的，那这里咱们通常使用基于角色发的访问控制（Role-Based Access Control），简称RBAC。其中权限为最小单元，其组合可分配给某一角色，对于某个帐号而言，可拥有多种角色，从而实现后端的访问控制。

前端界面层，须要根据后台的配置，实现后台左侧路由和侧边栏的动态权限控制，因此咱们还须要引入菜单层，这个菜单层在@/router/index.js这份文件里能够配置的。

这里的路由分为两种，constantRoutes 和 asyncRoutes

constantRoutes： 表明那些不须要动态判断权限的路由，如登陆页、40四、等通用页面。

asyncRoutes： 表明那些需求动态判断权限并经过 addRoutes 动态添加的页面。

那咱们关注的是：asyncRoutes。   这是须要咱们经过后台来配置，从而使得前端可以根据后台配置动态展现。

在index.js这份文件里，维护着前端菜单对象，每一个菜单对象底下的roles控制了该路由的进入权限，这个是实现前端动态权限的关键。

因为该菜单对象里，每一个菜单均可设置多种属性，对于后台而言，咱们仅须要维护部分信息便可，最终咱们能够根据关键信息，与前端路由进行合并，好比咱们能够维护菜单的路由地址。

vue-element-admin会根据当前用户角色，自动为咱们生成左侧动态路由，咱们须要作的就是：在用户登录层，拿到后台维护的菜单列表与前端的菜单列表进行merge,使得在生成动态路由以前，将角色设定好。

那前面咱们是从宏观上讨论了先后端的鉴权，接下来是咱们的用户登录，在登录层，咱们使用JWT实现后台用户认证机制，后续的请求验证便可根据此token那进行认证，这里并不做强求，也能够基于非对称加密进行登录认证。

最后还有一些细节，如系统的提示层，这里咱们须要在前端的响应拦截器里根据后端返回的状态码进行相应的错误提示，这里咱们直接使用http状态码判断便可，如用户登录过时，接口访问受限，表单验证错误，应给予不一样的提示与错误详情，甚至处理方法。

更多关于vue-element-admin教程能够参考腾讯课堂视频教程

基于vue-element-admin的后台权限验证系统：

https://ke.qq.com/course/2796167?tuin=1be21e0f

​

**