vue-element-admin是一个后台和前端解决方案，用它可以快速搭建企业后台。今天要说的是如何使用这个框架实现我们的后台动态权限验证。后端接口层需要完成对用户的最终认证，即当客户端请求我们的API时，后台需要在拦截器层正确判断用户是否可以访问该接口，这无关有了前端的话这里我们一般使用基于角色的访问控制（Role-BasedAccessControl）。其中，权限是最小的单位，它的组合可以赋予某个角色。对于一个账号，可以有多个角色，从而实现后台访问控制。前端界面层需要根据后台的配置实现后台左侧路由和侧边栏的动态权限控制，所以我们还需要引入菜单层，在@/router文件中配置即可/index.js。这里的路由有两种类型，constantRoutes和asyncRoutesconstantRoutes：表示不需要动态判断权限的路由，比如登录页面，404等一般页面。asyncRoutes：表示需要动态判断权限的页面，通过addRoutes动态添加。然后我们关注：asyncRoutes。这就需要我们通过后台对其进行配置，使得前端能够根据后台配置进行动态显示。在index.js文件中，维护了前端菜单对象，每个菜单对象下的角色控制了路由的访问权限，这是实现前端动态权限的关键。由于在菜单对象中，每个菜单可以设置多个属性，对于后台，我们只需要维护一些信息，最后我们可以根据关键信息与前端路由合并，比如我们可以维护路由菜单地址。vue-element-admin会根据当前用户角色自动为我们生成左边的动态路由。我们需要做的是：在用户登录层，获取后台维护的菜单列表，并与前端的菜单列表进行合并，以便在生成动态路由之前，设置角色。我们从宏观的角度讨论了前后端认证，然后是我们的用户登录。在登录层，我们使用JWT实现后台用户认证机制。后续的请求验证可以根据这个token进行鉴权，这里不再赘述。不是强制的，也可以基于非对称加密进行登录认证。最后是一些细节，比如系统的提示层。这里需要根据后端返回的状态码，在前端响应拦截器中提供相应的错误提示。这里我们可以直接使用http状态码来判断，比如用户登录过期，接口访问受限，表单验证错误应该给予不同的提示和错误详情，甚至处理方法。更多vue-element-admin教程请参考基于vue-element-admin后台权限验证系统的腾讯课堂视频教程：https://ke.qq.com/course/2993557?tuin=1be21e0f
