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>