基于Vue的动态菜单的权限控制实现方法

1、前端控制权限
1.1、前端控制权限的优点
（1）、提升突破权限的门槛；
（2）、过滤越权请求，减轻服务端压力；
（3）、提升用户体验；
2、权限控制
权限控制实现对路由、视图、请求的控制；
用路由控制实现动态菜单，控制思路有两个：
（1）、挂载全部路由，每次路由跳转前做校验；
（2）、只挂载用户拥有的路由，从前端路由着手控制；
通常采用方案（1），初始化只有登录路由的应用，用户登录后动态添加路由；
视图控制需要实现一个可以在视图层调用的权限验证方法，输入用户期望的权限，输出是否拥有该权限，将调用这个方法的结果，作为界面上要验证权限的控件或元素显示与否的依据；
请求控制就是使用http库实现一个请求拦截器，对将要发起的请求与用户资源权限进行匹配，拦截越权请求；
3、基于Vue的实现方案
初始化Vue实例，检查本地token，如果没有则跳转到登录页面，输入用户名和密码，登录返回token，存本地，设置Authorization获取权限数据，如果本地有token，直接设置Authorization获取权限数据。在请求header中设置Authorization，token会存在SessionStorage里，用户刷新将直接使用本地token授权，并重新获取权限数据，本地token失效，后端返回401状态码，前端跳回登录页面。
获取用户和权限数据后，产生动态路由,注入动态路由生成菜单，实现视图权限验证方法和指令，设置拦截器，然后异步加载路由组件，显示界面。
用addRouter()实现动态路由的加载。
在请求拦截器中获取本次请求的url和method信息，与资源权限的数据作比较，从而决定是否拦截。