Vue element-admin權(quán)限控制之按鈕使用

更新時(shí)間：2025年04月06日 11:23:50 作者：青衣畫(huà)白扇

這篇文章主要介紹了Vue element-admin權(quán)限控制之按鈕使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue element-admin權(quán)限控制之按鈕

在項(xiàng)目中一般的權(quán)限控制都是精確到按鈕的分配，那么在 elemen-admin中如何實(shí)現(xiàn)這一操作呢

第一步

需要?jiǎng)?chuàng)建 hasPermi.js 當(dāng)然名稱可以自定義這個(gè)js文件是做權(quán)限的匹配的

 /**
 * v-hasPermi 操作權(quán)限處理
 */

import store from '@/store'

 function checkPermission(el, binding) {
   const { value } = binding
   //通用權(quán)限測(cè)試用的偷懶的寫(xiě)法
   const all_permission = "*:*:*"; //此處定義的是權(quán)限的 格式：'system:sysUser:edit'
   const roles = store.getters && store.getters.permissions
   if (value && value instanceof Array) {
     if (value.length > 0) {
       const permissionRoles = value
       const hasPermission = roles.some(role => {
       	//這里如果是包含 或者 是上面的通配符號(hào)就放行顯示（當(dāng)然 生產(chǎn)環(huán)境是不能加這個(gè)通配符的）
         return all_permission === role || permissionRoles.includes(role)
       })

       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     }
   } else {
     throw new Error(`need roles! Like v-permission="['admin','editor']"`)
   }
 }

 export default {
 	//被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
   inserted(el, binding) {
     checkPermission(el, binding)
   },
   // 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化
   update(el, binding) {
     checkPermission(el, binding)
   }
 }

第二步

在創(chuàng)建一個(gè)index.js 來(lái)在Vue 中全局使用

import permission from './hasPermi'
const install = function(Vue) {
  Vue.directive('permission', permission)
}
/**
 * 按鈕權(quán)限
 */
if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

最后看看頁(yè)面怎么使用沒(méi)錯(cuò) 優(yōu)雅的使用 v-permission

<template slot-scope="scope">
          <el-button type="text" size="small"
                     icon="el-icon-edit"
                     v-permission="['system:sysUser:edit']"
                     @click="updateInfo(scope.row)">修改</el-button>
</template>

效果：當(dāng)用戶權(quán)限不包含 system:sysUser:edit時(shí) 修改按鈕隱藏