文章目录
1. 一张图搞懂按钮权限逻辑
好了,下面是具体实现步骤。
1. 第一步:创建src/directives/permission.js
1.1 思路:
- 在vue全局挂载方法$_has,主要实现思路是将页面的按钮英文名传入,用以对比目前是否在权限数组里面
- 方法定义好以后在main.js里面引入
1.2 代码:
在store/user.js
//permission.js 按钮权限
import Vue from 'vue';
const hasPermission = userPermission => {
// 当前按钮列表,我是用本地缓存存储
let btnPermissionList = JSON.parse(sessionStorage.getItem('menuList'));
// 因为后台返回的不是以按钮名的数组,所以需要过滤
let eglishPermission = btnPermissionList.map((v, i) => {
return v.menuCode
})
// 是否在权限数组里面
let status = eglishPermission.includes(userPermission)
return status
}
//全局方法挂载
Vue.prototype.$_has = hasPermission
1.3 main.js引入permission.js
import './directives/permission';
2. 第一步:在 store/user.js 中
在里面会获取当前登录的账号的按钮权限的数据
2.1 store/user.js
import Iams from "../../api/iams";
const state = {
btnPermission: []
};
// 定义好请求的方法,这里将把后台返回的按钮权限数组储存在state里面,或者本地缓存里面
const mutations = {
//获得按钮权限数组
getUserPermission(state) {
sessionStorage.setItem('menuList',JSON.stringify(state.btnPermission))
},
};
// 触发mutaitions里面定义好的方法
const actions = {
// 定义好请求的方法,这里将把后台返回的按钮权限数组储存在state里面,或者本地缓存里面
async GET_USER_PERMISSION({ commit,state }, payload) {
let result = await Iams.getMenuRoleList({});
if (result && result.ret === "200") {
state.btnPermission = result.data;
commit("getUserPermission");
}
},
};
const getters = {};
export default {
state,
mutations,
actions,
getters
};
2.2.Iams.getMenuRoleList 接口返回的数据(这里是通过判断menuCode
字段判断)
3. 第三步:在routerConfig.js(路由拦截器里面)
在判断完用户权限,以及是否为白名单以后的最后跳转步骤触发store里面actions里面的方法
import store from '@/store'
router.beforeEach((to, from, next) => {
// ...在所有判断进行完,准备放行的时候触发actions方法
store.dispatch('GET_USER_PERMISSION')
})
4. 触发步骤
每次路由切换时会去routerConfig.js里面触发store.js里面定义好的方法,拿到按钮权限数组,页面加载时,会主动触发页面绑定了$_has的方法,把当前的按钮英文名传递给方法,方法判断以后返回一个布尔类型,供页面渲染,从而实现权限控制!
<template>
<div>
<button v-if="$_has('user_add')">增加</button>
<button v-if="$_has('user_edit')">编辑</button>
<button v-if="$_has('user_delet')">删除</button>
</div>
</template>