前端权限控制
1个回答
展开全部
前端权限控制分为四个方面的控制
第一点界面控制：用户还未登入就能通过url访问到系统页面，该问题比较好解决通过路由守卫即可判断。
如果用户登入以后用url访问不是属于自己的菜单页，如我没有系统管理这个界面，我去地址栏输入系统管理这个页面的url，前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址，所以控制界面的方式就是从路由入手，前期我们配置大家都有的路由，其他的路由根据登入系统时后台返回的权限列表数据，动态添加路由。
在登入时我们把权限数据存入vuex中并本地化，通过路由对象可以获取到路由的配置，把那个用户的路由单独添加到路由列表中，使用addroutes添加更改后到路由配置，添加动态路由的方法调用在app.vue的created中，因为每次加载页面都会调用该方法。
第二菜单控制:
根据用户的不同菜单栏也不同，该问题跟动态路由类似登入时拿到数据存入vuex中并本地化，之后在菜单组件列表循环遍历出对应的菜单栏，过于简单就不截图了。
第三按钮控制：
这个控制可以采用自定义组件的方式，例如这个用户没有添加人员的按钮，他只有查看这个人员菜单的权限。在页面上按钮都添加上，但是是否能显示则根据后端传过来的权限数据，该数据在动态路由作为meta数据添加在路由上了，也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用，在页面我们添加按钮我们就加一个action属于为add，我们或者add去比较如果没有add这个权限如果处理。上图
第四请求拦截
请求拦截并不简单的做一个token，而是每个用户对应可以操作的请求放行，不是他可以操作的拦截，如他没有添加的请求则要拦截，前面不是做了按钮的控制吗，为啥还要做这个拦截，按钮控制并不安全，其实他可以通过浏览器直接修改按钮的属性，有人又说有token了不是可以拦截了吗，对，可以拦截不过那时后台拦截，你请求还是发过去了，请求影响系统性能，所以做这个还是有必要的。
请求拦截，根据名字就知道他是在请求拦截器里设置的，在拦截器中可以获取请求方式，根据请求方式与路由中的mate权限对比有就发送请求，如果没有则不发请求
第一点界面控制：用户还未登入就能通过url访问到系统页面，该问题比较好解决通过路由守卫即可判断。
如果用户登入以后用url访问不是属于自己的菜单页，如我没有系统管理这个界面，我去地址栏输入系统管理这个页面的url，前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址，所以控制界面的方式就是从路由入手，前期我们配置大家都有的路由，其他的路由根据登入系统时后台返回的权限列表数据，动态添加路由。
在登入时我们把权限数据存入vuex中并本地化，通过路由对象可以获取到路由的配置，把那个用户的路由单独添加到路由列表中，使用addroutes添加更改后到路由配置，添加动态路由的方法调用在app.vue的created中，因为每次加载页面都会调用该方法。
第二菜单控制:
根据用户的不同菜单栏也不同，该问题跟动态路由类似登入时拿到数据存入vuex中并本地化，之后在菜单组件列表循环遍历出对应的菜单栏，过于简单就不截图了。
第三按钮控制：
这个控制可以采用自定义组件的方式，例如这个用户没有添加人员的按钮，他只有查看这个人员菜单的权限。在页面上按钮都添加上，但是是否能显示则根据后端传过来的权限数据，该数据在动态路由作为meta数据添加在路由上了，也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用，在页面我们添加按钮我们就加一个action属于为add，我们或者add去比较如果没有add这个权限如果处理。上图
第四请求拦截
请求拦截并不简单的做一个token，而是每个用户对应可以操作的请求放行，不是他可以操作的拦截，如他没有添加的请求则要拦截，前面不是做了按钮的控制吗，为啥还要做这个拦截，按钮控制并不安全，其实他可以通过浏览器直接修改按钮的属性，有人又说有token了不是可以拦截了吗，对，可以拦截不过那时后台拦截，你请求还是发过去了，请求影响系统性能，所以做这个还是有必要的。
请求拦截，根据名字就知道他是在请求拦截器里设置的，在拦截器中可以获取请求方式，根据请求方式与路由中的mate权限对比有就发送请求，如果没有则不发请求
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
