溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在Vue項目中實現(xiàn)權限控制管理
對于一般稍大一些的后臺管理系統(tǒng)，往往有很多個人員需要使用，而不同的人員也對應了不同的權限系統(tǒng)，后端的權限校驗保障了系統(tǒng)的安全性，而前端的權限校驗則提供了優(yōu)秀的交互體驗。
校驗方式
前端對用戶的權限信息進行校驗往往在兩個方面進行限制
通過以上兩個方式，來將用戶權限之外的內(nèi)容隱藏掉。
路由不可見實現(xiàn)方法
在router.js中的meta字段中加入該路由的訪問權限列表
{
path: 'edit',
name: 'edit',
meta: {
title: '編輯賬戶',
auths:['edit_account']
},
component: () => import('pathToComponent/component.vue'),
},
Vue.router中提供了導航守衛(wèi)，我們這里使用 全局前置守衛(wèi) 對路由跳轉進行權限校驗
router.beforeEach(to,from,next)
參數(shù) 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 字段進行過濾。
元素不可見實現(xiàn)方法
因為某些頁面中會有一些特殊的接口調用或數(shù)據(jù)展示受到權限控制顯示。前端通過控制元素的展示來隱藏掉用戶不具有權限的元素，避免點擊了某一個button導致接口401報錯這樣不友好的交互體驗。
全局注冊一個directive, directive官網(wǎng)介紹 。
//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 可以獲得綁定指令時傳入的參數(shù)
el.style = "display:none"; //修改元素的可見狀態(tài)
}
}
}
//main.js
Vue.directive('acl',aclDirective); //全局注冊指令
在需要控制顯示的組件上我們就可以通過 v-acl 進行權限控制
<button v-acl="['edit_access']">編輯賬戶</button>
總結
以上所述是小編給大家介紹的Vue項目實現(xiàn)簡單的權限控制管理功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
