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

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

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

背景

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

實(shí)現(xiàn)原理

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

實(shí)現(xiàn)代碼

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

import store from '@/store'

export default {
 hasPermission: {
// inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
  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(`請(qǐng)?jiān)O(shè)置操作權(quán)限標(biāo)簽值`)
    }
  }
 }
}

指令注冊(cè)：main.js

// 多個(gè)指令的使用
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$/))
})

頁(yè)面使用

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

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

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

相關(guān)文章

最新評(píng)論