通过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功能中是否有删除权限   },/span> 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~