Vue-Access-Control 前端用户权限控制解决方案(4)
自定义指令内部仍然是调用全局验证方法,但优点在于只会在元素初始化时执行一次,多数情况下都应该使用自定义指令实现视图控制。
请求控制
请求控制是利用axios拦截器实现的,目的是将越权请求在前端拦截掉,原理是在请求拦截器中判断本次请求是否符合用户权限,以决定是否拦截。
普通请求的判断很容易,遍历后端返回的的资源权限格式,直接判断request.method和request.url是否吻合就可以了,对于带参数的url需要使用通配符,这里需要根据项目需求前后端协商一致,约定好通配符格式后,拦截器中要先将带参数的url处理成约定格式,再判断权限,方案中已经实现了以下两种通配符格式:
1. 格式:/resources/:id 示例:/resources/1 url: /resources/** 解释:一个名词后跟一个参数,参数通常表示名词的id 2. 格式:/store/:id/member 示例:/store/1/member url:/store/*/member
解释:两个名词之间夹带一个参数,参数通常表示第一个名词的id
对于第一种格式需要注意的是,如果你要发起一个url为"/aaa/bbb"的请求,默认会被处理成"/aaa/**"进行权限校验,如果这里的”bbb”并不是参数而是url的一部分,那么你需要将url改成"/aaa/bbb/",在最后加一个”/“表示该url不需要转化格式。
拦截器的具体实现见App.vue中的setInterceptor()方法。
如果你的项目还需要其他的通配符格式,只需要在拦截器中实现对应的检测和转化方法就可以了。
演示及说明
演示说明:
DEMO项目中演示了动态菜单、动态路由、按钮权限、请求拦截。
演示项目后端由rap2生成mock数据,登录请求通常应该是POST方式,但因为rap2的编程模式无法获取到非GET的请求参数,因此只能用GET方式登录,实际项目中不建议仿效;
另外登录后获取权限的接口本来不需要携带额外参数,后端可以根据请求头携带的token信息实现用户鉴权,但因为rap2的编程模式获取不到headers数据,因此只能增加一个”Authorization”参数用于生成模拟数据。
测试账号:
1. username: root password: 任意 2. username: client password: 任意
演示地址:
vue-access-control.refined-x.com
总结
以上所述是小编给大家介绍的Vue-Access-Control 前端用户权限控制解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!