“权限管理”一般在大家的印象中都属于后端的责任，但这两年随着 SPA 应用的兴起，很多应用都采用了前后端分离的方式进行开发，但是纯前端的开发方式就导致，以前很多由后端模板语言硬件解决的问题，现在势必要重新造一次轮子。而如果要重造轮子，前端er 就要根据对应的公司业务需求和后端er 一起配合，基于需求和安全性来考虑，来实现这个动态路由了。
所以考虑到以上的痛点和具体的业务需求。今天我会模拟前端请求后端，获取用户权限，实现RBAC，带你从登录到验证、鉴权，最终实现动态 RBACRABC 的功能。这样一来，你会解决大部分的后台痛点。（这一讲我们用到的技术栈是 vue2.6 + vue-router + vuex + element-ui
那么，我们的实现步骤应该是怎么样的呢？
我们希望在进行页面导航的时候，能先根据登录用户所具有的权限，判断用户是否能访问该页面。
实现可见页面的局部 UI 组件的可使用性或可见性控制，即基于自定义的权限，对比声明的接口或资源是否已经授权。
实现发送请求时，传输 token，对待请求接口进行权限检查，如果用户不具有访问该后端接口的权限，则不发送请求，而是友好地提示用户。
其中要实现步骤 1 这个目标，我们的方案是：获得登录用户的可访问前端页面的 path 列表，在router 进行导航的 beforeEach 前置钩子中，处理当前用户所能请求的页面及路由可见性。
接下来我们就一步步具体来实现吧！
搭建基础项目：
vue creat qx
方式一：
前端把用户输入的账号密码传递给后端，后端根据用户输入的账号密码，做鉴权和路由角色处理，然后把匹配了对应用户的路由返回给前端，再由前端去渲染路由和页面。这样的做法就是把所有的计算和处理都让后端去实现了，前端运算量不会太大，而且易于修改和后期维护以及动态的增删改查，我个人也是倾向这种实现，所以这一讲咱们就采取这种形式。
接下来，我们实现动态路由。
