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信息,与资源权限的数据作比较,从而决定是否拦截。

Logo

前往低代码交流专区

更多推荐