管理系统权限管理（菜单、页面、按钮）react+redux/vue3 pinia实现方式-程序员充电站

一、Vue3 + Pinia 权限控制示例

1️⃣ 权限点接口示例（后端返回）

{ "token": "xxx", "perms": [ "user:list", "user:add", "order:view" ] }

2️⃣ Pinia Store (stores/permission.ts)

import { defineStore } from 'pinia' interface UserData { id: string; name: string; role: string; } interface PermissionState { token: string userData: UserData | null perms: string[] } export const usePermissionStore = defineStore('permission', { state: (): PermissionState => ({ token: '', userData: null, perms: [] }), actions: { setToken(token: string) { this.token = token }, setUserData(user: UserData) { this.userData = user }, setPerms(perms: string[]) { this.perms = perms }, clear() { this.token = '' this.userData = null this.perms = [] }, // 根据 perms 过滤路由 filterRoutes(routes: any[]) { return routes.filter(route => { if (!route.meta?.perms) return true return route.meta.perms.some((p: string) => this.perms.includes(p)) }).map(route => { if (route.children) { route.children = this.filterRoutes(route.children) } return route }) }, // 菜单生成 generateMenus(routes: any[]) { return this.filterRoutes(routes) } } })

路由配置示例

export const asyncRoutes = [ { path: '/user', name: 'User', component: () => import('@/views/user/index.vue'), meta: { title: '用户管理', perms: ['user:list'] }, children: [ { path: 'add', name: 'UserAdd', component: () => import('@/views/user/add.vue'), meta: { title: '新增用户', perms: ['user:add'] } } ] }, { path: '/order', name: 'Order', component: () => import('@/views/order/index.vue'), meta: { title: '订单管理', perms: ['order:view'] } } ]

登录后调用

import { usePermissionStore } from '@/stores/permission' const permissionStore = usePermissionStore() const { token, userData, perms } = await api.login() permissionStore.setToken(token) permissionStore.setUserData(userData) permissionStore.setPerms(perms) // 生成菜单 const menuList = permissionStore.generateMenus(asyncRoutes)

按钮权限判断

<template> <button v-if="hasPerm('user:add')">新增用户</button> </template> <script setup lang="ts"> import { usePermissionStore } from '@/stores/permission' const permissionStore = usePermissionStore() function hasPerm(code: string) { return permissionStore.perms.includes(code) } </script>

二、React + Redux Toolkit 权限控制示例

Redux Slice (store/permissionSlice.ts)

import { createSlice, PayloadAction } from '@reduxjs/toolkit' interface UserData { id: string name: string role: string } interface PermissionState { token: string userData: UserData | null perms: string[] } const initialState: PermissionState = { token: '', userData: null, perms: [] } const permissionSlice = createSlice({ name: 'permission', initialState, reducers: { setToken: (state, action: PayloadAction<string>) => { state.token = action.payload }, setUserData: (state, action: PayloadAction<UserData>) => { state.userData = action.payload }, setPerms: (state, action: PayloadAction<string[]>) => { state.perms = action.payload }, clear: (state) => { state.token = '' state.userData = null state.perms = [] } } }) export const { setToken, setUserData, setPerms, clear } = permissionSlice.actions export default permissionSlice.reducer

Redux Store (store/index.ts)

import { configureStore } from '@reduxjs/toolkit' import permissionReducer from './permissionSlice' export const store = configureStore({ reducer: { permission: permissionReducer } }) export type RootState = ReturnType<typeof store.getState> export type AppDispatch = typeof store.dispatch

路由配置示例

import { lazy } from 'react' export const asyncRoutes = [ { path: '/user', element: lazy(() => import('@/pages/User')), meta: { title: '用户管理', perms: ['user:list'] }, children: [ { path: 'add', element: lazy(() => import('@/pages/UserAdd')), meta: { title: '新增用户', perms: ['user:add'] } } ] }, { path: '/order', element: lazy(() => import('@/pages/Order')), meta: { title: '订单管理', perms: ['order:view'] } } ]

登录后过滤路由

import { useSelector } from 'react-redux' import { RootState } from './store' const perms = useSelector((state: RootState) => state.permission.perms) function filterRoutes(routes: any[], perms: string[]) { return routes.filter(route => { if (!route.meta?.perms) return true return route.meta.perms.some((p: string) => perms.includes(p)) }).map(route => { if (route.children) route.children = filterRoutes(route.children, perms) return route }) } const allowedRoutes = filterRoutes(asyncRoutes, perms)

菜单渲染 & 按钮权限

// 菜单渲染 <Menu> {allowedRoutes.map(r => ( <Menu.Item key={r.path}>{r.meta.title}</Menu.Item> ))} </Menu> // 按钮权限 {perms.includes('user:add') && <Button>新增用户</Button>}

核心思路（Vue / React 通用）

后端只返回 perms 数组 → 前端根据它控制 UI
前端菜单 / 路由根据 perms 过滤
按钮或页面模块用 perms.includes(…) 控制显示
后端接口仍然要校验 perms → 真正的安全保障

菜单写死在前端，通过权限点 v-if 显示/隐藏（大厂常用）

流程：

菜单是前端写死的（存 routes.ts）
用户登录，后台只返回权限点（字符串数组，如 [‘user:add’, ‘user:delete’]）
前端根据权限点过滤导航栏、路由

示例

{ path: '/user', name: 'User', meta: { title: '用户管理', perms: ['user:view'] } }

✔ 优点：

前端掌控路由、菜单，灵活更容易维护
不需要后端维护菜单表
常用于大厂组件化、前后端分仓的模式
权限点即可驱动显示/隐藏按钮

前端菜单只是“显示控制”，不是安全控制

就算你用后台动态返回菜单，也不能防止用户：

手动输入地址
用 F12 改源码
注入 JS
抓包直接调接口

真正的安全是 API 权限验证

所以前端写死菜单 + 权限过滤 = 大厂最佳体验

措施	目的
前端菜单过滤	体验层：让用户不看到没权限的东西
后端接口校验	安全层：真正的权限防护（不可绕过）

后端控制实际操作

所有 API 请求都要校验用户权限
后端拿 token → 查角色 → 查 perms → 判断是否允许该操作
例如：POST /api/user/add
- 用户 perms 包含 user:add → 允许
- 用户 perms 不包含 user:add → 返回 403 Forbidden

重点

前端不需要每次请求都传 user:add
后端通过 token 或 session 自动知道谁在操作，然后根据权限码判断是否允许
前端只是可视化限制，真正的安全由后端负责

最终总结（Vue + React 通用）

功能点	Vue3 实现	React 实现
菜单写死	asyncRoutes	routes.tsx
权限点存储	Pinia	Zustand/Redux
菜单过滤	filterRoutes()	filterRoutes()
按钮权限	v-if hasPerm()	perms.includes()
安全关键	必须后端接口校验	必须后端接口校验