Vue项目实现简单的权限控制

在Vue项目中实现权限控制管理

对于通常稍大一些的后台管理系统，每每有不少我的员须要使用，而不一样的人员也对应了不一样的权限系统，后端的权限校验保障了系统的安全性，而前端的权限校验则提供了优秀的交互体验。

校验方式

前端对用户的权限信息进行校验每每在两个方面进行限制

• 路由不可见
• 元素不可见

经过以上两个方式，来将用户权限以外的内容隐藏掉。

路由不可见实现方法

在router.js中的meta字段中加入该路由的访问权限列表auths字段。

{
    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。

//acl.js
const 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.js
Vue.directive('acl',aclDirective); //全局注册指令

在须要控制显示的组件上咱们就能够经过v-acl进行权限控制

<button v-acl="['edit_access']">编辑帐户</button>