vue2 按钮权限（七）

实现思路

   权限格式,快速查找当前菜单下按钮权限，而不是跌倒所有权限匹配

 

{
   "*:*:*":{ // 系统id
      "*:*:*":['sys:user:add','sys:user:del'] // 菜单menuid
   },
   ......
}

 

目录结构

 

  hasPermi.js

 

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
     const all_permission = "*:*:*";
    const permissions = store.getters.getPermission
    
    let m_pms = []
    if (!permissions['*:*:*']) {
      const systemKey =  store.state.systemKey  // 系统id
      const menuId =  store.state.menuId  // 菜单id
      let s_pms = permissions[systemKey]
       m_pms = s_pms[menuId]  // 当前菜单下所有 按钮权限
    }
     

    if (value && value instanceof Array && value.length > 0) {
      if (permissions[all_permission]) return false
        const permissionFlag = value
        
        const hasPermissions = m_pms.some(permission => {
        return permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    
    // 不考虑id 把上边注释，使用下边打开注释
    //   const hasPermission = permissions.some(perm => {
    //     return value.includes(perm)
    //   })
     

      if (!hasPermissions) {
        console.log(el)
        el.parentNode && el.parentNode.removeChild(el)
        // el.setAttribute("disabled", "disabled")
      }
    } else {
      throw new Error(`需要指定权限标识! 如 v-permission="['sys:user:add']"`)
    }
  }
}

 

index.js

import hasRole from './hasRole'
import hasPermi from './hasPermi'  
const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi) 
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi 
  Vue.use(install); 
}

export default install

 

全局注册

main.js

 

import permission from './directive/permission'
Vue.use(permission)

 

  

在VUEX

store→modules→user.js

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

 

 

store→user.js

import { getInfo } from "@/api/user";
import { getToken } from "@/utils/auth";

const getDefaultState = () => {
  return {
    token: getToken(),
    permissions: [],
  };
};

const user = {
  state: getDefaultState(),
  mutations: {
    SET_PERMISSION: (state, permissions) => {
      state.permissions = permissions;
    },
  },

  actions: {
    //获取当前登录用户信息
    getInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token)
          .then((res) => {
            const { data } = res;
            if (!data) {
              return reject("Verification failed, please Login again.");
            }
            const { permissions } = data;
            commit("SET_PERMISSION", permissions);
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
};

export default user;

 

store→getter.js

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

 

  

store.dispatch('settings/xxxx', item)

 

页面使用按钮添加v-permission

<el-button type="primary" v-permission="['sys:user:de','sys:user:add']" @click="handleAdd">新增</el-button>