vue-element-admin教程之实现前后端动态权限的思路解析

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

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

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

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

constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。

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

那我们关注的是：asyncRoutes。   这是需要我们通过后台来配置，从而使得前端能够根据后台配置动态展示。

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

由于该菜单对象里，每个菜单都可设置多种属性，对于后台而言，我们仅需要维护部分信息即可，最终我们可以根据关键信息，与前端路由进行合并，比如我们可以维护菜单的路由地址。

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

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

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

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

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

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