在Vue項(xiàng)目中實(shí)現(xiàn)權(quán)限控制管理

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、白堿灘網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

對(duì)于一般稍大一些的后臺(tái)管理系統(tǒng)，往往有很多個(gè)人員需要使用，而不同的人員也對(duì)應(yīng)了不同的權(quán)限系統(tǒng)，后端的權(quán)限校驗(yàn)保障了系統(tǒng)的安全性，而前端的權(quán)限校驗(yàn)則提供了優(yōu)秀的交互體驗(yàn)。

校驗(yàn)方式

前端對(duì)用戶的權(quán)限信息進(jìn)行校驗(yàn)往往在兩個(gè)方面進(jìn)行限制

• 路由不可見
• 元素不可見

通過以上兩個(gè)方式，來將用戶權(quán)限之外的內(nèi)容隱藏掉。

路由不可見實(shí)現(xiàn)方法

在router.js中的meta字段中加入該路由的訪問權(quán)限列表

{
  path: 'edit',
  name: 'edit',
  meta: {
    title: '編輯賬戶',
    auths:['edit_account']
  },
  component: () => import('pathToComponent/component.vue'),
},

Vue.router中提供了導(dǎo)航守衛(wèi)，我們這里使用 全局前置守衛(wèi) 對(duì)路由跳轉(zhuǎn)進(jìn)行權(quán)限校驗(yàn)

router.beforeEach(to,from,next)

參數(shù) to 是即將進(jìn)入的路由對(duì)象，我們可以在對(duì)象中拿到之前在router.js中定義的 route 對(duì)象，并獲得 auths 字段

router.beforeEach((to,from,next)=>{
  const hasAuth = function(needAuths，haveAuths){   //判斷用戶是否擁有權(quán)限的function
    // implement 
  }
  const havaAuths = []; // 用戶擁有的權(quán)限列表
  if(!hasAuth(to.meta.auths,haveAuths)){
    //沒有權(quán)限重定位到其他頁面，往往是401頁面
    next({replace:true,name:'otherRouteName'})
  }
  //權(quán)限校驗(yàn)通過,跳轉(zhuǎn)至對(duì)應(yīng)路由
  next();
})

在有側(cè)邊欄的后臺(tái)管理中，還需要對(duì)側(cè)邊欄的路由導(dǎo)航進(jìn)行隱藏，這里同樣是通過拿到 route.meta.auths 字段進(jìn)行過濾。

元素不可見實(shí)現(xiàn)方法

因?yàn)槟承╉撁嬷袝?huì)有一些特殊的接口調(diào)用或數(shù)據(jù)展示受到權(quán)限控制顯示。前端通過控制元素的展示來隱藏掉用戶不具有權(quán)限的元素，避免點(diǎn)擊了某一個(gè)button導(dǎo)致接口401報(bào)錯(cuò)這樣不友好的交互體驗(yàn)。

全局注冊(cè)一個(gè)directive, directive官網(wǎng)介紹 。

//acl.js
const aclDirective = {
  inserted:function(el,binding){ // 在被綁定的元素插入到dom中時(shí)
    const hasAuth = function(needAuths，haveAuths){ //判斷用戶是否擁有權(quán)限的function
      // implement 
    }
    const havaAuths = []; // 用戶擁有的權(quán)限列表
    if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以獲得綁定指令時(shí)傳入的參數(shù)
      el.style = "display:none"; //修改元素的可見狀態(tài)
    }
  }
}
//main.js
Vue.directive('acl',aclDirective); //全局注冊(cè)指令

在需要控制顯示的組件上我們就可以通過 v-acl 進(jìn)行權(quán)限控制

編輯賬戶

總結(jié)

以上所述是小編給大家介紹的Vue項(xiàng)目實(shí)現(xiàn)簡單的權(quán)限控制管理功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！