时间:2021-05-26
在Vue项目中实现权限控制管理
对于一般稍大一些的后台管理系统,往往有很多个人员需要使用,而不同的人员也对应了不同的权限系统,后端的权限校验保障了系统的安全性,而前端的权限校验则提供了优秀的交互体验。
校验方式
前端对用户的权限信息进行校验往往在两个方面进行限制
通过以上两个方式,来将用户权限之外的内容隐藏掉。
路由不可见实现方法
在router.js中的meta字段中加入该路由的访问权限列表
{ path: 'edit', name: 'edit', meta: { title: '编辑账户', auths:['edit_account'] }, component: () => import('pathToComponent/component.vue'),},Vue.router中提供了导航守卫,我们这里使用全局前置守卫 对路由跳转进行权限校验
router.beforeEach(to,from,next)
参数to 是即将进入的路由对象,我们可以在对象中拿到之前在router.js中定义的route 对象,并获得auths 字段
router.beforeEach((to,from,next)=>{ const hasAuth = function(needAuths,haveAuths){ //判断用户是否拥有权限的function // implement } const havaAuths = []; // 用户拥有的权限列表 if(!hasAuth(to.meta.auths,haveAuths)){ //没有权限重定位到其他页面,往往是401页面 next({replace:true,name:'otherRouteName'}) } //权限校验通过,跳转至对应路由 next();})在有侧边栏的后台管理中,还需要对侧边栏的路由导航进行隐藏,这里同样是通过拿到route.meta.auths 字段进行过滤。
元素不可见实现方法
因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。前端通过控制元素的展示来隐藏掉用户不具有权限的元素,避免点击了某一个button导致接口401报错这样不友好的交互体验。
全局注册一个directive,directive官网介绍 。
//acl.jsconst aclDirective = { inserted:function(el,binding){ // 在被绑定的元素插入到dom中时 const hasAuth = function(needAuths,haveAuths){ //判断用户是否拥有权限的function // implement } const havaAuths = []; // 用户拥有的权限列表 if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以获得绑定指令时传入的参数 el.style = "display:none"; //修改元素的可见状态 } }}//main.jsVue.directive('acl',aclDirective); //全局注册指令在需要控制显示的组件上我们就可以通过v-acl 进行权限控制
<button v-acl="['edit_access']">编辑账户</button>总结
以上所述是小编给大家介绍的Vue项目实现简单的权限控制管理功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
权限框架缺陷。权限控制框架是实现权限控制功能的基础,权限控制框架在设计之初就存在缺陷,很容易导致权限控制相关功能失效。例如在用户访问cookie中使用简单的权限
问题:如何在springboot项目中使用springsecurity去实现角色权限管理呢?本文将尽可能简单的一步步实现对接口的角色权限管理。项目框架:sql:
前言最近一直在忙着一个用vue来做的权限管理的项目,其实在此之前,我也研究过vue的权限如何实现,并且也为之写过一篇博客,但当真正应用在项目中的时候,还是发现了
之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再
本文实例讲述了vue.js中实现登录控制的方法。分享给大家供大家参考,具体如下:vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想