前端的权限分为4个模块:
- 菜单栏 这个是需要后端传过来的数据直接进行绚烂 把这个数据存在Vuex中,这个有个问题就是重新刷新Vuex的数据会消失,所以需要把数据保存在sessionStorage中去。
- 界面栏 从刚刚的的菜单栏有些界面是没有,但是在浏览器的url中还是可以访问的到,所以这里需要使用到动态路由,根据菜单栏下面的二级标题来添加路由属性,在后端传来的数据中有一个path的属性标记的这个路径,可以写一个类的映射把路由动态的添加。(这个动态路由怎么写的还是需要去看看)
- 按钮的点击不显示 有些角色是不允许某些功能,例如添加的权限,前端就可以把这个点击的按钮不显示出来,这个流程是需要后台刚刚的二级菜单里面应该还有一个属性当前的用户当前的页面可以操作的权限,然后可以把这个权限的在动态路由中添加上去例如mate的属性,放在了router的属性下面,然后可以写一个V的简单指令,根据指令上面的属性来判断是否显示。
- 从上面的显示中,如果出现了一个人他是懂得代码,把这个不能点击的按钮给开启了,毕竟就算点击了请求服务器,服务器还是显示报错,所以可以把这次的请求前端拦截住,这个主要是在axios的一个请求中,根据请求的restful风格来进行判断,get就是显示数据 post添加数据 put修改数据 delete删除数据。进行判断。
- 登录的token 这个可以使用router的路由导航守卫来判断。
- 还有就是当页面停留很久导致token失效,当我们再此请求数据的时候服务器会返回一个401错误,我们可以使用axios的respond进行处理跳回到登录界面上去。
- 登入的退出,需要把sessionStorage的数据清除,使用当前页面的刷新就可以清除Vuex中的数据了。
前端的权限设置
原文:https://www.cnblogs.com/yuxinyu/p/14646088.html