前端权限管理实战：如何优雅地控制用户视图

这样做的好处是，当业务需求变更时，只需修改配置，无需触碰组件逻辑。

2. 统一的状态管理

利用 Context 或 Store 集中管理用户信息，避免在每个组件中重复获取用户数据。

// context/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(() => {
    // 初始化时从本地存储或 API 获取用户信息
    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>
  );
}

3. 封装通用 Hook 与组件

与其在每个地方写 if (user.role === 'admin')，不如封装一个 Hook 来复用逻辑。

// hooks/usePermission.js
import { useContext } from 'react';
import { AuthContext } from '../contexts/AuthContext';
import { checkPermission } from '../config/permissions';

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

配合自定义组件使用，可以让模板更干净：

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

4. 路由级防护

对于页面级别的访问控制，建议在路由配置层进行拦截，防止未授权用户直接通过 URL 访问。

// routes/index.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>
    )
  }
]);

避坑指南

虽然完善的权限体系很重要，但也不要过度设计。我曾见过一些项目为了实现细粒度控制，创建了数十个 Guard 组件，导致代码耦合度极高，连改个文案都要重构整个权限树。

记住两点原则：

1. 按需分配：简单应用不需要 RBAC 模型，简单的角色判断即可。
2. 前后端一致：前端只负责展示优化，所有敏感操作必须经过后端二次校验。

权限管理的本质是保护用户数据并提升体验，而不是炫技。如果实现方案让开发和维护变得更难，那它本身就是失败的。