首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue自定义权限标签

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

2023-09-15 11:15:29 作者：ByCode

这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下

技术栈

vuex
vue自定义标签

开门见山

1、创建directive

hasPermi.js

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

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) => {
                // 获取权限信息(请求后台数据接口)
                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目录下创建permission.js

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

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、按钮标签

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

说明：

如果后台接口返回的按钮权限数据里包含btn:delete则删除按钮显示，否则不显示

后台返回数据如下：

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

总结

到此这篇关于vue自定义权限标签的文章就介绍到这了,更多相关vue自定义权限标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue自定义权限指令的实现