前端权限管理实战：构建安全可控的访问体系

问题很明显：逻辑散落在各处，硬编码导致扩展困难，甚至存在直接调用 API 的安全隐患。

正确的做法：集中化与模块化

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']
    }
  },
  resources: {
    users: { name: 'Users', actions: ['create', 'read', 'update', 'delete'] },
    dashboard: { name: 'Dashboard', actions: ['access'] },
    profile: { name: 'Profile', actions: ['access', 'update'] }
  }
};

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. 封装通用 Hook

将权限逻辑抽离成自定义 Hook，让组件只关注业务，不关心权限细节。

// 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
  };
}

3. 路由级保护

在路由层面拦截未授权访问，比在页面内部跳转更可靠。

// components/ProtectedRoute.jsx
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;
}

4. UI 组件级控制

对于按钮或菜单项，使用守卫组件（Guard）进行条件渲染。

// components/PermissionGuard.jsx
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;
}

// 使用示例
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>
  );
}

5. 状态管理与更新

权限数据通常随登录态变化，需配合 Context 统一管理。

// contexts/AuthContext.jsx
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>
  );
}

总结与建议

权限管理确实重要，但切忌过度设计。我曾见过为了控制每个按钮的权限而创建大量组件，导致代码量激增且阅读困难。

在实际项目中，建议遵循以下原则：

1. 按需分配：根据实际需求决定权限粒度，简单应用不必引入复杂框架。
2. 前后端分离：前端负责体验优化，后端负责最终安全校验。
3. 保持灵活：预留扩展空间，方便未来新增角色或资源。

记住，权限管理的目的是保护数据和提升体验，而不是炫技。如果实现方案让用户操作变得繁琐，那它就已经失败了。