前端权限控制

Posted 2023-05-12

参考技术A 前端权限控制分为四个方面的控制

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

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

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

第二菜单控制:

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

第三按钮控制：

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

第四请求拦截

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

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

前端是怎么做权限控制的？

前端是怎么做权限控制的？

比如现在有一些项目成员，有的项目成员是测试，这个项目成员登录项目的时候就可以看到"提交冒烟用例"按钮，但是其它的项目成员则不能够看到，这个功能是如何实现的呢？

前端会把每一个项目成员的权限存储在一个表里面，如下：

测试人员 开发人员 产品经理

A按钮权限 A按钮权限 C按钮权限

B按钮权限 F按钮权限 D按钮权限

这样的话，测试人员登录的时候就会显示出A按钮，B按钮；开发人员登录的时候就会显示A按钮，F按钮；产品经理登录的时候就会显示C按钮，D按钮。

前端只需要根据当前登录人去表里面查询对应的权限，就可以显示出当前登录人权限之内的按钮了，这就是前端的权限控制。