vue 按钮权限

项目中按钮的操作权限我们可以直接使用 v-if 判断就行，但是每个页面都要写一堆判断不太雅观。
所以，可以写一个全局函数或者自定义指令 ，两种方式优雅的实现。

一、全局函数

一般在登陆接口中后台就把权限列表信息提供了，可以把他存到缓存或者vuex里。

vuex中设置权限数据,具体代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import tagsView from './modules/tagsView'
import { constantRoutes } from '../router/index'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		//设置属性,用于保存后台接口返回的权限数据
		permission: [],
	},
	mutations: {
		SET_PERMISSION(state, permission) { //permission 为传入的权限标识集合
			// 传入的权限集合 赋值给状态中的 permission
			sessionStorage.setItem('permission', JSON.stringify(permission));
		},
	},
	actions: { // 官方不推荐直接修改mutation， 可使用actions来提交 mutation
		SET_PERMISSION(context, permission) {
			// 提交到 mutation 中的 SET_PERMISSION 函数
			// context.commit("SET_PERMISSION", permission);
			sessionStorage.setItem('permission', JSON.stringify(permission));
		},
	}
})

export default store

在登录的页面,获取用户权限信息的时候就可以触发SET_PERMISSION这个方法

//res.data.data.menuPermission就是相应的权限数据
this.$store.dispatch(
	"SET_PERMISSION",
	res.data.data.menuPermission
);

在 utils 文件夹创建一个 permission.js 文件

import store from '../store/index.js'
/**
 * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
 */
export function hasPermission (perms) {
  let hasPermission = false;
  let permission = store.state.user.role.rights
  for (let item of permission) {
    if (item === perms) {
      hasPermission = true;
      break;
    }
  }
  return hasPermission;
}

在需要用到的组件引用

<template>
  <el-button :disabled="!hasPerms('edit')">编辑</el-button>
</template>

<script>
  // 禁用标识
  // :disabled="!hasPerms(perms)"
import { hasPermission } from '@utils/Permission/index.js'
export default {
  data() {
    return {
    }
  },
  methods: {
      hasPerms(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) // !this.disabled
    }
  }
}
</script>

二、自定义指令

创建 premission.js 文件

import Vue from 'vue'
import store from '../store/index.js'
//自定义指令，用来控制按钮权限
Vue.directive('permission', {
  inserted (el, binding) {
    // 当前按钮传递的值( v-permission="'add'" 中的值)
    const currentTag = binding.value.action
    const effect = binding.value.effect
    // 获取到存放在 store 中的权限数据
    const currentRight = store.state.user.role.rights
    // 判断是否存在对应的按钮权限
    let item = currentRight.filter((item) => {
      return item === currentTag
    })
    //不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
    if (item.length === 0) {
      if (effect === 'disabled') {
        el.disabled = true
        el.classList.add('is-disabled')
      } else {
        el.parentNode.removeChild(el)
      }
    }
  }
})

在页面中使用按钮时, 用上自定义的 v-premission 指令

<el-button v-permission="{action:'edit',effect:'disabled'}">编辑</el-button>

注意：在vue3中，使用方式有所不同
permission.js文件

import App from './App.vue'
import store from '../store/index.js'
const app = createApp(App);

app.directive('permission', {
   mounted(el, binding) {
      // 当前按钮传递的值( v-permission="'add'" 中的值)
	    const currentTag = binding.value.action
	    const effect = binding.value.effect
	    // 获取到存放在 store 中的权限数据
	    const currentRight = store.state.user.role.rights
       // 判断是否存在对应的按钮权限
	    let item = currentRight.filter((item) => {
	      return item === currentTag
	    })
	    //不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
	    if (item.length === 0) {
	      if (effect === 'disabled') {
	        el.disabled = true
	        el.classList.add('is-disabled')
	      } else {
	        el.parentNode.removeChild(el)
	      }
    	}
   }
})