亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例

 更新時(shí)間：2023年09月15日 11:19:52   作者：ByCode  
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過(guò)創(chuàng)建自定義組件來(lái)實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

技術(shù)棧

  • vuex
  • vue自定義標(biāo)簽

開(kāi)門見(jiàn)山

1、創(chuàng)建directive

hasPermi.js

 /**
 * v-hasPermi 操作權(quán)限處理
 */
import store from '@/store'
export default {
  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)
      }
    } else {
      throw new Error(`請(qǐng)?jiān)O(shè)置操作權(quán)限標(biāo)簽值`)
    }
  }
}

index.js

import hasPermi from './permission/hasPermi'
const install = function(Vue) {
  Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}
export default install

2、store

user.js

import {getPermissions} from "@/api/token/assets";
import async from "async";
const user = {
    state: {
        permissions: []
    },
    mutations: {
        SET_PERMISSIONS: (state, permissions) => {
            state.permissions = permissions
        }
    },
    actions: {
        // 獲取用戶信息
        GetInfo({commit}, query) {
            return new Promise((resolve, reject) => {
                // 獲取權(quán)限信息(請(qǐng)求后臺(tái)數(shù)據(jù)接口)
                getPermissions(query).then(res => {
                    if ( res.code == 200 ) {
                        commit('SET_PERMISSIONS', res.data)
                    }
                    resolve(res)
                }).catch(error => {
                    reject(error)
                })
            })
        }
    }
}
export default user

getters.js

const getters = {
  token: state => state.user.token,
  permissions: state => state.user.permissions
}
export default getters

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store

3、src目錄下創(chuàng)建permission.js

import router from './router'
import store from './store'
import { Message } from 'element-ui'
router.beforeEach((to, from, next) => {
  // to.query 獲取url路由請(qǐng)求參數(shù)，傳遞給后端使用
  store.dispatch('GetInfo',to.query).then(() => {
    next()
  }).catch(err => {
    Message.error(err)
  })
})

4、src下的main.js使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import directive from './directive' // directive
import store from './store'
import './permission' // permission control
Vue.use(ElementUI)
Vue.use(directive)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5、按鈕標(biāo)簽

 <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['btn:delete']"
          >刪除
          </el-button>

說(shuō)明：

如果后臺(tái)接口返回的按鈕權(quán)限數(shù)據(jù)里包含btn:delete則刪除按鈕顯示，否則不顯示

后臺(tái)返回?cái)?shù)據(jù)如下：

[
  "btn:list", 
  "btn:add", 
  "btn:delete", 
  "btn:edit"
]

總結(jié) 

到此這篇關(guān)于vue自定義權(quán)限標(biāo)簽的文章就介紹到這了,更多相關(guān)vue自定義權(quán)限標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論