前端的权限设置
前端的权限分为4个模块:
1. 菜单栏 这个是需要后端传过来的数据直接进⾏绚烂把这个数据存在Vuex中,这个有个问题就是重新刷新Vuex的数据会消失,所
以需要把数据保存在sessionStorage中去。
2. 界⾯栏 从刚刚的的菜单栏有些界⾯是没有,但是在浏览器的url中还是可以访问的到,所以这⾥需要使⽤到动态路由,根据菜单栏
下⾯的⼆级标题来添加路由属性,在后端传来的数据中有⼀个path的属性标记的这个路径,可以写⼀个类的映射把路由动态的添加。
(这个动态路由怎么写的还是需要去看看)
3. 按钮的点击不显⽰有些⾓⾊是不允许某些功能,例如添加的权限,前端就可以把这个点击的按钮不显⽰出来,这个流程是需要后台刚
用户登录界面设计代码html
刚的⼆级菜单⾥⾯应该还有⼀个属性当前的⽤户当前的页⾯可以操作的权限,然后可以把这个权限的在动态路由中添加上去例如mate 的属性,放在了router的属性下⾯,然后可以写⼀个V的简单指令,根据指令上⾯的属性来判断是否显⽰。
4. 从上⾯的显⽰中,如果出现了⼀个⼈他是懂得代码,把这个不能点击的按钮给开启了,毕竟就算点击了请求服务器,服务器还是显⽰
报错,所以可以把这次的请求前端拦截住,这个主要是在axios的⼀个请求中,根据请求的restful风格来进⾏判断,get就是显⽰数据post添加数据 put修改数据 delete删除数据。进⾏判断。
5. 登录的token 这个可以使⽤router的路由导航守卫来判断。
6. 还有就是当页⾯停留很久导致token失效,当我们再此请求数据的时候服务器会返回⼀个401错误,我们可以使⽤axios的respond进⾏
处理跳回到登录界⾯上去。
7. 登⼊的退出,需要把sessionStorage的数据清除,使⽤当前页⾯的刷新就可以清除Vuex中的数据了。
步骤:
1. 先把username 和 password 传给后端 =》返回token
2. 拿token 再去请求 userInfo,userinfo 包含菜单栏⽤户名⾓⾊权限表
3. 请求后端的动态路由的⼤表
4. 权限表下⾯只是⼀个字符串,写⼀个对应表,根据字符串来⽣成compent
5. 然后再使⽤addRouter添加路由。
6. 这个侧边的菜单是从动态路由添加完成了,从路由表中取出来的。
7. 控制页⾯中是否可以进⾏页⾯上的某个操作,先是去获取这个操作的权限⾓⾊表,然后与当前⽤的⾓⾊表进⾏对⽐。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论