当前位置:首页 » 服务存储 » 权限存储到vuex
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

权限存储到vuex

发布时间: 2023-03-05 23:31:31

前端权限控制

前端权限控制分为四个方面的控制

第一点界面控制:用户还未登入就能通过url访问到系统页面,该问题比较好解决通过路由守卫即可判断。

如果用户登入以后用url访问不是属于自己的菜单页,如我没有系统管理这个界面,我去地址栏输入系统管理这个页面的url,前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址,所以控制界面的方式就是从路由入手,前期我们配置大家都有的路由,其他的路由根据登入系统时后台返回的权限列表数据,动态添加路由。

在登入时我们把权限数据存入vuex中并本地化,通过路由对象可以获取到路由的配置,把那个用户的路由单独添加到路由列表中,使用addroutes添加更改后到路由配置,添加动态路由的方法调用在app.vue的created中,因为每次加载页面都会调用该方法。

第二菜单控制:

根据用户的不同菜单栏也不同,该问题跟动态路由类似登入时拿到数据存入vuex中并本地化,之后在菜单组件列表循环遍历出对应的菜单栏,过于简单就不截图了。

第三按钮控制:

这个控制可以采用自定义组件的方式,例如这个用户没有添加人员的按钮,他只有查看这个人员菜单的权限。在页面上按钮都添加上,但是是否能显示则根据后端传过来的权限数据,该数据在动态路由作为meta数据添加在路由上了,也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用,在页面我们添加按钮我们就加一个action属于为add,我们或者add去比较如果没有add这个权限如果处理。上图

第四请求拦截

请求拦截并不简单的做一个token,而是每个用户对应可以操作的请求放行,不是他可以操作的拦截,如他没有添加的请求则要拦截,前面不是做了按钮的控制吗,为啥还要做这个拦截,按钮控制并不安全,其实他可以通过浏览器直接修改按钮的属性,有人又说有token了不是可以拦截了吗,对,可以拦截不过那时后台拦截,你请求还是发过去了,请求影响系统性能,所以做这个还是有必要的。

请求拦截,根据名字就知道他是在请求拦截器里设置的,在拦截器中可以获取请求方式,根据请求方式与路由中的mate权限对比有就发送请求,如果没有则不发请求

⑵ vuex存储和本地存储的区别

vuex管理的是应用处于当前运行状态下的一些数据,而storage保存的是由应用告诉浏览器需要保存的数据,区别是,网页一刷新,vuex数据就没了,而storage不受刷新影响。。。因此,在保存数据时,应该结合所使用场景的情况,因地制宜