前端权限设计
前端权限设计是控制用户在系统中可访问资源（页面、按钮、接口等）的关键，核心目标是 **“按角色 / 权限展示对应内容”**。以下是前端权限设计的核心思路和实现方式：
一、权限设计的核心维度
页面级权限
- 控制用户能否访问某个路由页面（如普通用户看不到 “管理员后台” 页面）。
- 未授权时通常跳转至登录页或 403 页面。
功能级权限
- 控制页面内的操作按钮 / 功能（如普通用户没有 “删除” 按钮，只有 “查看” 权限）。
数据级权限
- 控制用户能看到的数据范围（如部门经理只能看本部门数据），通常需后端配合返回对应数据。
二、实现流程（以 React 为例）
1. 权限数据的获取与存储
- 来源：用户登录后，后端返回该用户的权限列表（如
permissions: ['user:view', 'user:edit']）或角色（role: 'admin'）。 - 存储：用全局状态管理（如 Redux、Context）或本地存储（localStorage）保存权限数据，供全项目使用。
// 登录后保存权限
const login = async () => {const res = await api.login(credentials);const { permissions, userInfo } = res.data;// 存全局状态dispatch({ type: 'SET_PERMISSIONS', payload: permissions });// 可选：存localStorage防止刷新丢失localStorage.setItem('permissions', JSON.stringify(permissions));
};
2. 页面级权限控制（路由拦截）
- 基于路由配置表，通过 “权限判断” 动态生成可访问路由。
- 配合路由守卫（如 React Router 的
Navigate、useEffect拦截）实现跳转控制。
// 路由配置表（含权限标识）
const routes = [{path: '/user',component: UserPage,permission: 'user:view' // 访问该页面需要的权限},{path: '/admin',component: AdminPage,permission: 'admin:view' // 管理员专属}
];// 动态生成可访问路由
const getAccessibleRoutes = (userPermissions) => {return routes.filter(route => {// 无需权限的页面直接放行（如登录页）if (!route.permission) return true;// 有权限要求则判断是否包含return userPermissions.includes(route.permission);});
};// 路由守卫（React Router v6）
const PrivateRoute = ({ element, requiredPermission }) => {const { permissions } = useSelector(state => state.user);if (!permissions.includes(requiredPermission)) {return <Navigate to="/403" replace />; // 无权限跳转403}return element;
};// 使用示例
<Route path="/user" element={<PrivateRoute element={<UserPage />} requiredPermission="user:view" />}
/>
3. 功能级权限控制（按钮 / 组件显示）
- 封装权限判断组件（如
PermissionButton），通过权限标识控制元素显示 / 隐藏。
// 权限判断工具函数
const hasPermission = (requiredPermission) => {const permissions = JSON.parse(localStorage.getItem('permissions') || '[]');return permissions.includes(requiredPermission);
};// 权限按钮组件
const PermissionButton = ({ requiredPermission, children, ...props }) => {if (!hasPermission(requiredPermission)) {return null; // 无权限则不渲染}return <button {...props}>{children}</button>;
};// 使用示例
<PermissionButton requiredPermission="user:edit">编辑用户</PermissionButton>
<PermissionButton requiredPermission="user:delete">删除用户</PermissionButton>
三、优化与注意事项
权限缓存与更新
- 用户权限变更后（如管理员修改权限），需重新获取权限数据并刷新路由 / 页面。
默认权限与边界处理
- 未登录用户默认无权限，跳转至登录页；
- 避免因权限配置错误导致页面空白（可加默认显示兜底）。
与后端配合
- 前端权限仅做 “展示控制”，核心权限校验必须依赖后端（防止用户通过控制台篡改前端权限）。
- 数据级权限需后端根据用户权限过滤数据后返回。
通过以上方式，可实现前端权限的精细化控制，既保证用户体验，又确保系统安全。