vue项目实现按钮的权限

思路：定义一个按钮，传一个值，看这个值是否在用户权限数组里面，如果在就说明有权限返回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)"/>