项目权限控制

权限控制一般常见于后台管理系统，如超级管理员、管理员……
或者是多端的情况……
可访问路由：
登录成功(拿到 accessToken，存入本地和vuex ) ==> 传入账号发起身份请求 ==> 后端根据账号的不同返回不同的权限(例：data:{roleName: “超级管理员”} ，存入本地和vuex) ==> vuex中根据 roleName 去发起请求 ==> 后端根据 roleName 返回不同的路由path或name列表，遍历异步路由，筛选出对应 path 的route ==> 等router.isReady()初始化静态路由（这么做的原因是只初始化静态路由，一些项目即使没有登录，也可能访问一些页面，所以我们只初始化一些无关紧要的页面，一些需要权限的路由需要我们动态添加路由记录之后才能访问），添加完静态路由记录之后 .then ==> 遍历筛选出来的异步路由，使用 router.addRoute动态添加路由记录（vue-router4.x 暂时没有 addRoutes方法），将静态路由与可访问的异步路由拼接得到最终的可访问路由，之后 sidebar 侧边栏遍历就依赖这个数据。

可操作按钮：
方案一：获取完可访问异步路由之后，再发一个请求，同样根据roleName “超级管理员” 的身份去获取可以操作的所有按钮名称列表，给需要权限惭怍的按钮添加唯一的名称，拿到这些名称存入vuex和本地。例如之后一个数据列表，每个数据都有编辑、删除、复制等操作按钮，这些数据都是后端返回的，只需要在返回的数据里加上按钮的名称，之后无论是用v-if-else 去控制他的禁用还是隐藏，亦或是通过自定义指令去控制显示影藏，都很方便，唯一需要注意的是，本地存储的数据可能被认为修改，这个时候需要加上一段重新获取对应tab权限的请求，与本地存储的tab操作权限列表对比，如果发现不一样就提示操作权限错误，并跳转到登录页要求重新登录（最好带上当前页面 path，方便登陆成功后跳转回来）；
方案二：给每个具有操作权限的按钮提供一个可操作的身份列表，例如：删除按钮的可操作身份列表是：[“超级管理员”,“管理员”]，那么只需要用本地存储roleName去这个列表里查找，如果有那么这个按钮就可以操作，任然需要加一段逻辑去验证本地的身份与当前账号的身份是否不一致，不一致同样提示权限错误，跳转登录页。
需要注意：如果按钮根据身份不同只是禁用了，恰好你这个按钮上绑定了方法，而这个方法又需要发起请求（不发起请求的即使操作了也不会影响服务端的数据，主要是防止用户通过hack手段修改服务端的数据），这个时候为了避免用户手动修改样式把禁用去掉，在发起请求的时候我们仍然可以拿到按钮的权限信息，与本地存储的权限信息比较，不一致就不发起请求，照样弹出提示，跳转登录页。

总的来说权限校验需要前后端的配合，根据账号拿取对应的身份信息（或者直接用账号去拿取权限信息），用身份信息去拿取可操作异步路由以及可操作按钮权限。