vue项目实现按钮的权限(Vue project implementation button permissions)

思路:定义一个按钮,传一个值,看这个值是否在用户权限数组里面,如果在就说明有权限返回true,根据true设置禁用或者隐藏;如果不存在就说明返回返回false,根据false设置禁用或者隐藏。

定义一个按钮组件KtButton.vue

<template>
  <Button :size="size" :type="type" :icon="icon" :loading="loading" :disabled="!hasPerms(perms,permRoute)"  @click="handleClick">{{buttonValue}}</Button>
</template>
 
<script>
import { hasPermission } from '@/libs/permission.js'
export default {
  name: 'KtButton',
  props: {
    buttonValue: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: {  // 按钮尺寸
      type: String,
      default: 'mini'
    },
    icon:{
      type: String,
      default: null
    },
    type: {  // 按钮类型
      type: String,
      default: null
    },
    loading: {  // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识,外部使用者传入
      type: String,
      default: null
    },
    permRoute: {
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    }, 
    hasPerms: function (perms,permRoute) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms,permRoute) //& !this.disabled
    }
  },
  mounted() {
  }
}
</script>

permission.js用来判断当前按钮是否有权限

import store from '@/store/index.js'

export const hasPermission = (perm,permRoute) => {
    let hasPermission = false;
    let permission = store.state.user.userInfo.permissions;
    console.log(permRoute)
    let tmp = permRoute.substr(1)
    let filterArr = permission.filter(item=>{
        return item.indexOf(tmp) > - 1
    })
    console.log(filterArr)
    for (var i = 0; i < filterArr.length; i++) {
        if(filterArr[i].indexOf(perm)>-1){
            hasPermission = true;
            break;
        }
    }
    return hasPermission;
}

store中部分代码,主要是存储菜单

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: [],
    needGetPermission: true,
    currentApplicationCode: ''
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    },
    SET_NEED_GET_PERMISSION: (store, data) => {
      store.needGetPermission = data
    },
    SET_CURRENT_APPLICATION_CODE: (store, data) => {
      store.currentApplicationCode = data
    }
  },
  getters:{
    menuList: state => state.addRouters,
    getCurrentApplicationCode: state => state.currentApplicationCode
  },
  actions: {
    GenerateRoutes ({ commit }) {
      return new Promise((resolve, reject) => {
        let appId = localStorage.getItem('APPLICATION_CODE') || ''
        if (appId === '') {
          reject()
        }
        const params = {
          menuId: appId
        }
        getRouters(params).then(res=>{
          if (res.code === 200) {
            const accessedRouters = generateIndexRouter(res.data)
            // const accessedRouters = generateIndexRouter(router)
            commit('SET_CURRENT_APPLICATION_CODE', appId)
            commit('SET_NEED_GET_PERMISSION', false)
            commit('SET_ROUTERS', accessedRouters)
            resolve()
          }
        })
      })
    }
  }
}
export default permission;

在main.js中全局注册,供全局使用

// 按钮组件 全局使用
import KtButton from '@/view/components/button/KtButton.vue'
Vue.component("KtButton",KtButton);

组件中使用按钮时

 <KtButton size="large" buttonValue='添加' perms='list' :permRoute="$route.path" type="primary" icon="md-add" @click="add"/>
 <KtButton size="large" buttonValue='删除' perms='delete' :permRoute="$route.path"  icon="md-trash" @click="delAll(selectList)"/>
————————

Idea: define a button and pass a value to see whether the value is in the user permission array. If it is, it means that you have permission to return true. Set it to disable or hide according to true; If it does not exist, it indicates that false is returned. It is disabled or hidden according to the false setting.

Define a button component ktbutton.vue

<template>
  <Button :size="size" :type="type" :icon="icon" :loading="loading" :disabled="!hasPerms(perms,permRoute)"  @click="handleClick">{{buttonValue}}</Button>
</template>
 
<script>
import { hasPermission } from '@/libs/permission.js'
export default {
  name: 'KtButton',
  props: {
    buttonValue: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: {  // 按钮尺寸
      type: String,
      default: 'mini'
    },
    icon:{
      type: String,
      default: null
    },
    type: {  // 按钮类型
      type: String,
      default: null
    },
    loading: {  // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识,外部使用者传入
      type: String,
      default: null
    },
    permRoute: {
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    }, 
    hasPerms: function (perms,permRoute) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms,permRoute) //& !this.disabled
    }
  },
  mounted() {
  }
}
</script>

Permission.js is used to determine whether the current button has permission

import store from '@/store/index.js'

export const hasPermission = (perm,permRoute) => {
    let hasPermission = false;
    let permission = store.state.user.userInfo.permissions;
    console.log(permRoute)
    let tmp = permRoute.substr(1)
    let filterArr = permission.filter(item=>{
        return item.indexOf(tmp) > - 1
    })
    console.log(filterArr)
    for (var i = 0; i < filterArr.length; i++) {
        if(filterArr[i].indexOf(perm)>-1){
            hasPermission = true;
            break;
        }
    }
    return hasPermission;
}

Store part of the code, mainly the storage menu

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: [],
    needGetPermission: true,
    currentApplicationCode: ''
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    },
    SET_NEED_GET_PERMISSION: (store, data) => {
      store.needGetPermission = data
    },
    SET_CURRENT_APPLICATION_CODE: (store, data) => {
      store.currentApplicationCode = data
    }
  },
  getters:{
    menuList: state => state.addRouters,
    getCurrentApplicationCode: state => state.currentApplicationCode
  },
  actions: {
    GenerateRoutes ({ commit }) {
      return new Promise((resolve, reject) => {
        let appId = localStorage.getItem('APPLICATION_CODE') || ''
        if (appId === '') {
          reject()
        }
        const params = {
          menuId: appId
        }
        getRouters(params).then(res=>{
          if (res.code === 200) {
            const accessedRouters = generateIndexRouter(res.data)
            // const accessedRouters = generateIndexRouter(router)
            commit('SET_CURRENT_APPLICATION_CODE', appId)
            commit('SET_NEED_GET_PERMISSION', false)
            commit('SET_ROUTERS', accessedRouters)
            resolve()
          }
        })
      })
    }
  }
}
export default permission;

Register globally in main.js for global use

// 按钮组件 全局使用
import KtButton from '@/view/components/button/KtButton.vue'
Vue.component("KtButton",KtButton);

When using buttons in components

 <KtButton size="large" buttonValue='添加' perms='list' :permRoute="$route.path" type="primary" icon="md-add" @click="add"/>
 <KtButton size="large" buttonValue='删除' perms='delete' :permRoute="$route.path"  icon="md-trash" @click="delAll(selectList)"/>