欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue利用自定義指令實現(xiàn)按鈕權限控制

 更新時間：2023年05月25日 14:13:13   作者：fuGUI  
這篇文章主要為大家詳細介紹了Vue如何利用自定義指令實現(xiàn)按鈕權限控制效果，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考下

背景

目前系統(tǒng)里面有一些頁面需要根據(jù)用戶的角色不同，顯示不同的按鈕，如果用戶分配了該按鈕權限就展示，否則沒有分配權限的按鈕就不展示。

實現(xiàn)原理

在 el-button 按鈕上設置標簽數(shù)值，利用 vue 的指令功能獲取按鈕實例對象和按鈕上綁定的標簽數(shù)值，與從接口拿到的按鈕權限數(shù)據(jù)進行匹配，如果匹配成功，證明用戶擁有該按鈕的使用權限，如果發(fā)現(xiàn)沒有使用權限，則在指令處理函數(shù)中編寫代碼移除該按鈕，界面上就看不到該按鈕了。

實現(xiàn)代碼

指令實現(xiàn)：src/directive/hasPermission.js

import store from '@/store'

export default {
 hasPermission: {
// inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
        // 或者：el.style.display = 'none'
      }
    } else {
      throw new Error(`請設置操作權限標簽值`)
    }
  }
 }
}

指令注冊：main.js

// 多個指令的使用
Vue.use((vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext)
      ; (arr || []).forEach((directive) => {
        directive = directive.__esModule && directive.default ? directive.default : directive
        Object.keys(directive).forEach((key) => {
          vue.directive(key, directive[key])
        })
      })
  })(require.context('./directives', false, /^\.\/.*\.js$/))
})

頁面使用

在具體的頁面，按鈕中只需引用v-has-permission指令，賦值判斷即可：

<el-button type="primary" v-has-permission="'page1:add'">新增</el-button>

到此這篇關于Vue利用自定義指令實現(xiàn)按鈕權限控制的文章就介紹到這了,更多相關Vue按鈕權限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論