vue vuex操作按钮权限控制

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>