vue自定义权限标签详细代码示例

 /**
 * v-hasPermi 操作权限处理
 */
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(`请设置操作权限标签值`)
    }
  }
}

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

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) => {
                // 获取权限信息(请求后台数据接口)
                getPermissions(query).then(res => {
                    if ( res.code == 200 ) {
                        commit('SET_PERMISSIONS', res.data)
                    }
                    resolve(res)
                }).catch(error => {
                    reject(error)
                })
            })
        }
    }
}
export default user

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

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

import router from './router'
import store from './store'
import { Message } from 'element-ui'
router.beforeEach((to, from, next) => {
  // to.query 获取url路由请求参数，传递给后端使用
  store.dispatch('GetInfo',to.query).then(() => {
    next()
  }).catch(err => {
    Message.error(err)
  })
})

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')

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

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