通过vuex管理操作用户权限

vuex，虽说是一个可能即将要被淘汰的状态管理模式，但既然项目中遇到了，还是提出来记录一下开发思路，毕竟万变不离其宗~

---

首先用户信息是从后端接口获取到的，我们将要调用的获取用户信息接口封装成方法放在api文件夹下的index.js或另开一个user.js文件，例如：

export function getUserRole(){
  let user = localStorage.getItem('userName');
  return axios({
    url:'/XXXX/user',
    method:'get',
    params:{
      name: user,
      startPage: 1,
      pageSize: 10
    }
  }).then(res=>{
    return res.data.list; // 把接口返回的用户信息列export出去
  });
}

然后我们来到vuex的store文件夹里，vuex的配置就不细说了，看官方文档或百度配置成自己习惯的方式即可，demo放出来仅供参考一下——

在store文件夹下创建modules文件夹，分模块存放，新建我们的user.js文件用于存放用户权限信息相关的状态管理内容：

index.js里：

*重点！user.js里：

import { getUserRole } from '../../api/user'; // 引用上方写在api里的获取用户信息接口调用返回的数据
// 因为请求是异步，所以在actions里调用getUserRole方法
export default {
  states: {
    userRole: '', // 用户信息
    importRole: false, // 用户是否为重要角色（超级管理员）
    XXXDelectRole: false, // 用户在XXX功能中是否拥有删除权限
  },
  getters: {
	// 本文用不到getters，可根据自身项目运用
  },
  mutations: {
    // 异步请求放在actions里，actions通过commit调用mutations的事件，在mutations里把处理好的数据存放入state中
    // 用户信息
    updateuserRole(state, user) {
      state.userRole = user; 
    },
    // 用户是否为重要角色（超级管理员）
    updateimportRole(state, boolean) {
      state.importRole = boolean;
    },
    // 用户在XXX功能中是否拥有删除权限
    updateXXXDelectRole(state, boolean) {
      state.XXXDelectRole = boolean;
    },
  },
  actions: {
    /**
     * 初始化系统
     * @param {*} param0
     */
    setUserRole({ commit }) {
      // 引用api里通过axios请求到用户数据的方法getUserRole
      getUserRole().then(res => {
        // 如果请求有返回用户信息：
        if (res.length) {
          commit('updateuserRole', res.userRoleInfo); // userRoleInfo为接口返回的用户身份信息。
          commit('updateimportRole', res.userRoleInfo == 'administrator' ? true : false); // 假如用户身份信息是administrator（超级管理员），则该用户是重要用户，state.importRole变为true。
          commit('updateXXXDelectRole', res.userRoleInfo== 'administrator' || res.userRoleInfo == 'manager' || res.userRoleInfo == 'finance' ? true : false); 
          // 假如用户身份信息是超级管理员/经理/财务，则该用户拥有XXX页面的删除数据权限。
        }
      });
    }
  },
};

在实际页面中调用：

<!-- XXX.vue -->

<!-- 只有超级管理员能看到的编辑按钮：使用v-if搭配vuex中存放的importRole来判断按钮显示与否 -->
<el-button :class="edit" @click="edit(row)" v-if="$store.state.user.importRole">编辑</el-button>
<!-- 删除按钮同理，使用vuex内的XXXDelectRole来判断 -->
<el-button :class="edit" @click="delect(row)" v-if="$store.state.user.XXXDelectRole">编辑</el-button>

getUserRole(){
  console.log('当前操作用户身份为' + this.$store.state.user.userRole); // 从store状态管理中获取用户身份信息
}

---

在用户权限校验这方面，你永远可以相信状态管理模式！
轻松拿下，THX~