【前端权限】权限状态全局管理

最新推荐文章于 2025-12-15 07:24:15 发布

原创最新推荐文章于 2025-12-15 07:24:15 发布 · 1.6k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vuex #pinia #redux #权限控制 #RBAC

前端业务实践专栏收录该内容

89 篇文章

订阅专栏

🦉权限状态全局管理

🌟 引言

在前端权限系统中，权限状态的全局管理是实现高效、可维护权限控制的核心。老曹在多年的项目实践中发现，统一管理用户信息、角色和权限列表不仅能提升代码的复用性，还能显著降低维护成本。本节课将围绕Vue生态中的Vuex与Pinia，以及React生态中的Redux展开，探讨如何通过状态管理工具实现权限状态的集中化管理。

💡 老曹提示
权限状态的全局管理不仅是技术实现的问题，更是架构设计的关键。一个良好的权限状态管理方案能够为后续功能扩展提供坚实的基础。

🎯 学习目标

理解权限状态全局管理的核心概念及其重要性。
掌握使用Vuex或Pinia管理Vue项目的权限状态。
学会通过Redux管理React项目的权限状态。
熟悉权限状态初始化、更新与持久化的实现方法。
能够独立完成权限状态管理模块的设计与实现。

📚 一、权限状态全局管理概述

🔹 1.1 权限状态的构成

权限状态通常包括以下核心内容：

用户信息：如用户ID、姓名、部门等。
角色信息：用户所属的角色列表。
权限列表：用户拥有的权限标识集合。
Token信息：用于身份验证的JWT或其他令牌。

🔹 1.2 全局管理的优势

通过全局管理权限状态，可以带来以下好处：

集中化管理：避免权限状态分散在各个组件中，降低维护成本。
一致性保障：确保所有组件访问的是最新的权限状态。
易于扩展：支持动态更新权限状态，适应复杂场景需求。
性能优化：减少重复获取权限数据的开销。

🛠️ 二、Vue中的权限状态管理

🔹 2.1 使用`Vuex`管理权限状态

🔸 2.1.1 Vuex的基本结构

Vuex是一个专为Vue应用设计的状态管理库，其核心概念包括：

State：存储权限状态。
Getters：计算属性，用于派生权限状态。
Mutations：同步修改权限状态。
Actions：异步操作，如从后端获取权限数据。

🔸 2.1.2 示例代码解析

// store/permission.js
export default {
  state: {
    userInfo: null, // 用户信息
    roles: [],      // 角色列表
    permissions: [], // 权限列表
    token: '',      // Token
  },
  getters: {
    hasPermission: (state) => (permission) => {
      return state.permissions.includes(permission);
    },
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    },
    SET_ROLES(state, roles) {
      state.roles = roles;
    },
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions;
    },
    SET_TOKEN(state, token) {
      state.token = token;
    },
  },
  actions: {
    async fetchUserPermissions({ commit }) {
      const response = await axios.get('/api/user/permissions');
      const { userInfo, roles, permissions } = response.data;

      // 更新状态
      commit('SET_USER_INFO', userInfo);
      commit('SET_ROLES', roles);
      commit('SET_PERMISSIONS', permissions);
    },
  },
};

🔸 2.1.3 在组件中使用

<template>
  <div>
    <p>User Name: {{ userInfo?.name }}</p>
    <button v-if="hasPermission('edit')">Edit</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasPermission']),
  },
  created() {
    this.$store.dispatch('fetchUserPermissions');
  },
};
</script>

🔹 2.2 使用`Pinia`管理权限状态

Pinia是Vue 3推荐的状态管理库，相比Vuex更加轻量且易用。

🔸 2.2.1 示例代码解析

// stores/permission.js
import { defineStore } from 'pinia';

export const usePermissionStore = defineStore('permission', {
  state: () => ({
    userInfo: null,
    roles: [],
    permissions: [],
    token: '',
  }),
  getters: {
    hasPermission: (state) => (permission) => {
      return state.permissions.includes(permission);
    },
  },
  actions: {
    async fetchUserPermissions() {
      const response = await axios.get('/api/user/permissions');
      const { userInfo, roles, permissions } = response.data;

      this.userInfo = userInfo;
      this.roles = roles;
      this.permissions = permissions;
    },
  },
});

🔸 2.2.2 在组件中使用

<template>
  <div>
    <p>User Name: {{ permissionStore.userInfo?.name }}</p>
    <button v-if="permissionStore.hasPermission('edit')">Edit</button>
  </div>
</template>

<script>
import { usePermissionStore } from '@/stores/permission';

export default {
  setup() {
    const permissionStore = usePermissionStore();

    onMounted(() => {
      permissionStore.fetchUserPermissions();
    });

    return { permissionStore };
  },
};
</script>

🛠️ 三、React中的权限状态管理

🔹 3.1 使用`Redux`管理权限状态

🔸 3.1.1 Redux的基本结构

Redux是一个强大的状态管理库，其核心概念包括：

State：存储权限状态。
Reducers：定义如何更新状态。
Actions：触发状态更新。
Selectors：派生状态，用于优化性能。

🔸 3.1.2 示例代码解析

// store/permissionSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchUserPermissions = createAsyncThunk(
  'permission/fetchUserPermissions',
  async () => {
    const response = await axios.get('/api/user/permissions');
    return response.data;
  }
);

const permissionSlice = createSlice({
  name: 'permission',
  initialState: {
    userInfo: null,
    roles: [],
    permissions: [],
    token: '',
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserPermissions.fulfilled, (state, action) => {
      const { userInfo, roles, permissions } = action.payload;
      state.userInfo = userInfo;
      state.roles = roles;
      state.permissions = permissions;
    });
  },
});

export const selectHasPermission = (state, permission) => {
  return state.permission.permissions.includes(permission);
};

export default permissionSlice.reducer;

🔸 3.1.3 在组件中使用

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUserPermissions, selectHasPermission } from './store/permissionSlice';

const UserProfile = () => {
  const dispatch = useDispatch();
  const userInfo = useSelector((state) => state.permission.userInfo);
  const hasPermission = useSelector((state) => selectHasPermission(state, 'edit'));

  useEffect(() => {
    dispatch(fetchUserPermissions());
  }, [dispatch]);

  return (
    <div>
      <p>User Name: {userInfo?.name}</p>
      {hasPermission && <button>Edit</button>}
    </div>
  );
};

export default UserProfile;

🧩 四、权限状态的初始化与持久化

🔹 4.1 初始化流程

权限状态的初始化通常发生在应用启动时，通过调用后端接口获取用户信息和权限列表。

🔹 4.2 持久化策略

为了提高用户体验，可以将部分权限状态（如Token）持久化到localStorage或sessionStorage中。

🔸 4.2.1 示例：Token持久化

// Vuex 示例
mutations: {
  SET_TOKEN(state, token) {
    state.token = token;
    localStorage.setItem('token', token); // 持久化
  },
},
actions: {
  restoreToken({ commit }) {
    const token = localStorage.getItem('token');
    if (token) {
      commit('SET_TOKEN', token);
    }
  },
},