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)"/>