话不多说，进入正题，系统权限控制一般需要达到的要求有两点：
- 只能访问用户角色权限内的页面；
- 只能访问分配的路由页面的接口；
由上两个需求可以看出，首先我们需要准备四张基础表，分别为用户表、角色表、路由表、接口表，其次需要准备三张关联表，分别为用户-角色表、角色-路由表、路由-接口表。假设表已经建好，同时你的后端兄弟已经给你开发好了用户信息接口（返回用户信息，包括角色Id等）、角色路由接口（返回角色关联的路由信息）、以及一系列的增删改查接口，那么现在就开始前端权限的开发吧。
一、动态注册Vue Router路由表
因为是基于Vue的权限控制，所以前端路由这一块使用官方推荐的Vue Router来进行控制，具体的动态注册路由表步骤如下：
- 第一步：系统登录成功后请求用户信息接口，拿到角色Id等重要信息，并将角色Id存至localstorage；
- 第二步：通过角色Id，请求角色路由接口，拿到角色关联的路由信息，并将路由信息存至localstorage；
- 第三步：将localstorage中的路由信息转换为可注册的routes，然后调用router.addRoutes注册路由表，同时根据routes渲染导航栏，其中routes的类型定义如下所示：
完成以上三步后，系统的路由动态控制就基本完成了，动态注册路由表有个好处。不会出现修改url能访问到不属于用户角色权限的路由页面，因为不属于用户角色权限的页面不会被注册，访问会报404 ，有效避免了专业人士的非法访问。
vuex与路由守卫
虽然按照以上步骤就可以获取并注册路由表，但是如果只是这样的话，当修改角色权限或者路由之后，只能通过退出重新登录重走一遍流程才能更新为最新的权限，因为存储到localstorage的数据不会响应式的反馈到页面上，如何才能做到实时更新权限呢？这就需要用到vuex了。众所周知，vuex是一个状态管理工具，具有集中管理共享数据、数据响应式等特点，因此我们需要将上述步骤修改为以下步骤：
- 第一步：系统登录成功后请求用户信息接口，拿到角色Id等重要信息，存放角色Id到vuex；
- 第二步：通过从vuex拿到的角色Id，请求角色路由接口，拿到角色关联的路由信息并存放到vuex；
- 第三步：将从vuex拿到的路由信息转换为可注册的routes，然后调用router.addRoutes注册路由表，同时根据routes渲染导航栏即可。
按照以上步骤当调用了修改权限相关接口时，实时更改vuex中相关数据，确实可以做到响应式渲染路由，不过vuex有一个致命的弱点，刷新页面后数据会重置，因此我们还需要在重置后判断没有数据的情况下重新走一遍拿用户数据以及路由信息的流程，正好Vue Router提供了导航守卫的功能，可以在进入路由之前进行一系列操作，如下所示：
所以现在步骤应该为：
- 第一步：设置路由守卫，添加以下逻辑：1、添加登录页为白名单，如果遇到登陆页直接放开；2、其他页面需进行判断，如果vuex中角色Id为空，请求用户角色接口和角色路由接口获取数据并存储vuex，随后再进行跳转；3、token之类的鉴权判断，如果cookie中不存在token，则跳转登陆页进行登录。
- 第二步：系统登录成功后请求用户信息接口，拿到角色Id等重要信息，存放角色Id到vuex；
- 第三步：通过从vuex拿到的角色Id，请求角色路由接口，拿到角色关联的路由信息并存放到vuex；
- 第四步：将从vuex拿到的路由信息转换为可注册的routes，然后调用router.addRoutes注册路由表，同时根据routes渲染导航栏。
完成以上步骤后，系统基础的权限控制就做好了，前端方面很好的实现了第一个只能访问用户角色权限内的页面的需求，同时还具备了实时更新角色权限、路由守卫等功能，至于第二个只能访问分配的路由页面的接口的需求，则需要后端在全局设个拦截器对用户角色的路由接口权限进行查询，从而判断该接口是否能被当前用户访问。
