脚本宝典收集整理的这篇文章主要介绍了

20180308_vue-router前端权限控制问题

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue-router前端权限控制问题
前提纲要:
1.用户A和用户B有不同的权限。
页面分左侧菜单部分和右侧内容部分,右侧内容可能有不同路径的不同内容
最简单例子为点击左侧用户管理
右侧显示用户列表
点击某条内容详情
右侧显示某一用户的详细内容
2.用户A可以访问路径权限如下:

a/list
a/detail/:id
a/list/:id 

用户B可以访问路径权限如下:

b/list
b/detail/:id
b/list/:id

3.正常用户登陆进去可以看到自己的菜单,
点击菜单右侧内容部分发生变化,然后在右侧操作,更改页面url,左侧菜单不变,右侧内容页发生变化

碰到问题如下:
用户B登陆进去点击菜单进入b/detail/:id然后保存为书签(即保存该路径)退出
然后用户A登陆点击保存的标签页,正常获取左侧菜单权限,左侧菜单正常显示,但是右侧却根据url显示了自己权限外的b/detail/:id的内容(暂不考虑跟服务端交互问题,虽说服务端可以再掉用接口时给出无权限返回,前端再根据返回进行逻辑处理,但即便这样前端页面显示依旧不正常)

解决方案:
在路由进入之前,根据路由的meta属性的某一字段比对所有的可访问权限(这个在登录时已经获取了,可以存在localstorage里),如果能找到则进去否则跳转到某个固定页,这样就解决了权限问题

总结

以上是脚本宝典为你收集整理的

20180308_vue-router前端权限控制问题

全部内容,希望文章能够帮你解决

20180308_vue-router前端权限控制问题

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过