前端权限管理实现方案与最佳实践

问题：

• 权限逻辑分散，难以维护
• 硬编码权限，难以扩展
• 缺少权限检查，存在安全隐患
• 权限管理混乱，难以理解
• 缺少权限状态管理，用户体验差

正确的做法

权限管理设计

// 1. 权限配置
const permissions = {
  roles: {
    admin: { name: 'Admin', permissions: ['users:create', 'users:read', 'users:update', 'users:delete', 'dashboard:access'] },
    user: { name: 'User', permissions: ['users:read', 'users:update', 'profile:access'] },
    guest: { name: 'Guest', permissions: ['login:access', 'register:access'] }
  },
  resources: {
    users: { name: 'Users', actions: ['create', 'read', 'update', 'delete'] },
    dashboard: { name: 'Dashboard', actions: ['access'] },
    profile: { name: 'Profile', actions: ['access', 'update'] },
    login: { name: 'Login', actions: ['access'] },
    register: { name: 'Register', actions: ['access'] }
  }
};

// 2. 权限检查函数
function checkPermission(user, resource, action) {
  if (!user || !user.role) return false;
  const rolePermissions = permissions.roles[user.role]?.permissions || [];
  const permissionKey = `${resource}:${action}`;
  return rolePermissions.includes(permissionKey);
}

// 3. 角色检查函数
function checkRole(user, requiredRole) {
  if (!user || !user.role) return false;
  return user.role === requiredRole;
}

// 4. 权限管理钩子
import { useContext } from 'react';
import { AuthContext } from './AuthContext';
export function usePermission() {
  const { user } = useContext(AuthContext);
  return {
    hasPermission: (resource, action) => checkPermission(user, resource, action),
    hasRole: (role) => checkRole(user, role),
    user
  };
}

路由权限管理

// 1. 受保护的路由组件
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { usePermission } from './usePermission';

export function ProtectedRoute({ children, requiredPermissions = [], requiredRole = null }) {
  const { hasPermission, hasRole, user } = usePermission();
  const location = useLocation();

  // 检查角色
  if (requiredRole && !hasRole(requiredRole)) {
    return <Navigate to="/unauthorized" state={{ from: location }} replace />;
  }

  // 检查权限
  if (requiredPermissions.length > 0) {
    const hasAllPermissions = requiredPermissions.every(({ resource, action }) => hasPermission(resource, action));
    if (!hasAllPermissions) {
      return <Navigate to="/unauthorized" state={{ from: location }} replace />;
    }
  }
  return children;
}

// 2. 路由配置
import { createBrowserRouter } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Home from './pages/Home';
import Admin from './pages/Admin';
import Profile from './pages/Profile';
import Login from './pages/Login';
import Unauthorized from './pages/Unauthorized';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/admin', element: (<ProtectedRoute requiredRole="admin"><Admin /></ProtectedRoute>) },
  { path: '/profile', element: (<ProtectedRoute requiredPermissions={[{ resource: 'profile', action: 'access' }]}><Profile /></ProtectedRoute>) },
  { path: '/login', element: <Login /> },
  { path: '/unauthorized', element: <Unauthorized /> }
]);

UI 权限管理

// 1. 权限控制组件
import React from 'react';
import { usePermission } from './usePermission';

export function PermissionGuard({ children, resource, action, fallback = null }) {
  const { hasPermission } = usePermission();
  if (!hasPermission(resource, action)) return fallback;
  return children;
}

// 2. 角色控制组件
import React from 'react';
import { usePermission } from './usePermission';

export function RoleGuard({ children, role, fallback = null }) {
  const { hasRole } = usePermission();
  if (!hasRole(role)) return fallback;
  return children;
}

// 3. 条件渲染
import React from 'react';
import { PermissionGuard } from './PermissionGuard';
import { RoleGuard } from './RoleGuard';

function UserActions({ userId }) {
  return (
    <div>
      <PermissionGuard resource="users" action="update">
        <button>Edit User</button>
      </PermissionGuard>
      <PermissionGuard resource="users" action="delete">
        <button>Delete User</button>
      </PermissionGuard>
    </div>
  );
}

function AdminMenu() {
  return (
    <RoleGuard role="admin">
      <nav>
        <ul>
          <li><a href="/admin/users">Users</a></li>
          <li><a href="/admin/dashboard">Dashboard</a></li>
          <li><a href="/admin/settings">Settings</a></li>
        </ul>
      </nav>
    </RoleGuard>
  );
}

权限状态管理

// 1. AuthContext
import React, { createContext, useState, useEffect } from 'react';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const userData = localStorage.getItem('user');
        if (userData) setUser(JSON.parse(userData));
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, []);

  const login = async (credentials) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(credentials)
    });
    const userData = await response.json();
    setUser(userData);
    localStorage.setItem('user', JSON.stringify(userData));
    return userData;
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 2. 权限管理钩子
import { useContext } from 'react';
import { AuthContext } from './AuthContext';
import { checkPermission, checkRole } from './permissions';

export function usePermission() {
  const { user } = useContext(AuthContext);
  return {
    hasPermission: (resource, action) => checkPermission(user, resource, action),
    hasRole: (role) => checkRole(user, role),
    user
  };
}

// 3. 权限状态更新
function updateUserPermissions(userId, permissions) {
  return fetch(`/api/users/${userId}/permissions`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ permissions })
  })
  .then(response => response.json())
  .then(data => {
    const user = JSON.parse(localStorage.getItem('user'));
    user.permissions = data.permissions;
    localStorage.setItem('user', JSON.stringify(user));
    return data;
  });
}

最佳实践

// 1. 权限配置中心化
// permissions.js
export const permissions = {
  roles: {
    admin: { name: 'Admin', permissions: ['users:create', 'users:read', 'users:update', 'users:delete', 'dashboard:access'] },
    user: { name: 'User', permissions: ['users:read', 'users:update', 'profile:access'] },
    guest: { name: 'Guest', permissions: ['login:access', 'register:access'] }
  }
};

export function checkPermission(user, resource, action) {
  if (!user || !user.role) return false;
  const rolePermissions = permissions.roles[user.role]?.permissions || [];
  const permissionKey = `${resource}:${action}`;
  return rolePermissions.includes(permissionKey);
}

// 2. 权限管理组件化
// components/PermissionGuard.jsx
import React from 'react';
import { usePermission } from '../hooks/usePermission';

export function PermissionGuard({ children, resource, action, fallback = null }) {
  const { hasPermission } = usePermission();
  if (!hasPermission(resource, action)) return fallback;
  return children;
}

// 3. 路由权限统一管理
// routes.js
import { createBrowserRouter } from 'react-router-dom';
import ProtectedRoute from './components/ProtectedRoute';
import Home from './pages/Home';
import Admin from './pages/Admin';
import Profile from './pages/Profile';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/admin', element: (<ProtectedRoute requiredRole="admin"><Admin /></ProtectedRoute>) },
  { path: '/profile', element: (<ProtectedRoute requiredPermissions={[{ resource: 'profile', action: 'access' }]}><Profile /></ProtectedRoute>) }
]);

// 4. 权限检查工具函数
// utils/permission.js
export function canAccessRoute(user, route) {
  if (!route.requiredRole && !route.requiredPermissions) return true;
  if (route.requiredRole) return user?.role === route.requiredRole;
  if (route.requiredPermissions) return route.requiredPermissions.every(({ resource, action }) => checkPermission(user, resource, action));
  return false;
}

// 5. 权限状态管理
// hooks/usePermission.js
import { useContext } from 'react';
import { AuthContext } from '../contexts/AuthContext';
import { checkPermission, checkRole } from '../utils/permissions';

export function usePermission() {
  const { user } = useContext(AuthContext);
  return {
    hasPermission: (resource, action) => checkPermission(user, resource, action),
    hasRole: (role) => checkRole(user, role),
    user
  };
}

总结与建议

权限管理至关重要，但需避免过度复杂化。创建大量组件可能导致代码量激增，应权衡实际需求。过度控制每个按钮可能破坏用户体验，导致界面支离破碎。实现时应把握度，根据需求决定范围。对于严格场景，完善管理是必要的；简单应用则应避免增加维护成本。记住，权限管理的目的是保护数据和提升体验，而非炫技。若实现导致体验变差，即为失败。