项目中按钮的操作权限我们可以直接使用 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)
}
}
}
})