前端权限控制设计

一、展示控制

前端权限控制的目的是，根据当前用户的身份控制其能访问的页面和可执行的操作。需要注意的是：前端权限控制主要是为了提升用户体验（如隐藏无权限的菜单，按钮），正真的数据安全必须依赖后端实现。

二、RBAC

业界主流的权限管理模型是RBAC（基于角色的访问控制），其核心思想是将"权限"授予"角色"，将"角色"授予"用户"，实现了用户与权限的逻辑分离，极大的简化了权限的分配与管理。

三、主要流程

主要包括用户身份认证、权限分配、权限校验和页面展示控制。

用户登录后，前端从后端获取用户的权限列表。
前端根据用户权限信息，决定展示哪些菜单或按钮。
路由级别做权限校验，未授权用户访问受限页面时自动跳转到无权限提示页或登录页。
组件级别做权限控制，操作按钮或表单项根据权限动态展示或禁用。

四、实现要点

1.获取用户权限信息

typescript 复制代码

// context/AuthProvider

const AuthContext = createContext(undefined);

export const useAuth = () => useContext(AuthContext);
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  // 从本地存储中恢复用户权限信息
  useEffect(() => {
    const user = localStorage.getItem('user');
    if (user) {
      setUser(JSON.parse(user));
    }
  }, []);

  const login = async (username, password) => {
    const user = await loginApi(username,password);
    setUser(user);
    // 登录后缓存用户权限信息
    localStorage.setItem('user', JSON.stringify(user));
  };

  const logout = () => {
    setUser(null);
    // 登出后清除本地缓存
    localStorage.removeItem('user');
  };

  const hasPermission = (permission: string | string[]): boolean => {
    if (!user) return false;
    if (Array.isArray(permission)) {
      return permission.some(p => user.permissions.includes(p));
    }
    
    return user.permissions.includes(permission);
  };

  const value = {
    user,
    login,
    logout,
    hasPermission
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

2.封装路由权限校验组件

javascript 复制代码

// components/AuthRoute.js
import { useAuth } from '../context/AuthProvider'; // 自定义 hook，获取用户信息

const AuthRoute = ({ children, meta }) => {
  const { user, hasPermission } = useAuth();

   // 用户未登录，重定向到登录页面
  if (meta.requiresAuth && !user) {
    return <Navigate to="/login" replace />;
  }

  // 用户没有权限，重定向到未授权页面
  if (meta.permission && !hasPermission(meta.permission)) {
    return <Navigate to="/403" replace />;
  }

  // 权限通过，渲染子组件
  return children;
};

export default AuthRoute;

3.创建路由

javascript 复制代码

// router/index.js
import AuthRoute from '../components/AuthRoute';

const Router = () => {
  const element = routes.map(({ path, element:Component, meta }) => ({
      path,
      element: (
        <AuthRoute meta={meta}>
          <Component />
        </AuthRoute>
      )
  }));
  return <RouterProvider router={createBrowserRouter(routers)} />;
};

export default Router;

4.封装按钮权限校验组件

javascript 复制代码

import { useAuth } from '../context/AuthProvider'; // 自定义 hook，获取用户信息

export const AuthButton = ({
  permission,
  children,
  onClick,
}) => {
  const { hasPermission } = useAuth();
  const hasAccess = hasPermission(permission);

  if (!hasAccess) {
    return null;
  }

  return (
    <button 
      onClick={onClick} 
    >
      {children}
    </button>
  );
};

5.按钮权限控制

javascript 复制代码

import { AuthButton } from '../components/AuthButton';

export const ContentManagement = () => {
  
  return (
     <AuthButton 
        permission="content.edit"
        onClick={() => handleEdit(item.id)}
     >
        编辑
     </AuthButton>
  );
};

五、技术难点

1.多粒度权限控制

页面级权限控制：通过前端路由守卫实现，例如，React Router的高阶组件、Vue Router 的beforeEach钩子。
组件级权限控制：通过条件渲染隐藏或禁用无权限的按钮。

2.细粒度权限控制

按钮、表单项等细粒度权限控制，难点在于检查点分散，如果每个按钮都要添加额外的权限控制逻辑，维护成本高；另外权限检查函数频繁执行（如在列表中渲染几十个按钮），可能造成性能问题。

常用的做法是封装自定义 Hook（如 usePermission）或高阶组件，并且缓存组件的权限检查结果。

3.状态管理的复杂性

用户权限信息需要全局共享且保持一致性。难点在于：

初始化时机：页面渲染时可能还没拿到用户信息，容易导致未授权页面闪现。
Token 过期：接口返回Token过期，需要自动跳转登录，同时清空本地缓存。
多标签页同步：如果一个标签页登出，其他标签页也需要更新状态，否则可能操作报错。

解决方案通常是利用 Context全局共享，使用webStorage本地缓存，利用广播实现多标签页同步。

4.前后端权限一致性

前端权限控制本质是提升用户体验，正真的数据安全必须依赖后端实现。但难点在于：

双重校验的一致性：前端隐藏了按钮，用户仍可能通过直接访问 API 进行操作，所以后端必须对所有接口做权限校验。

数据同步滞后：如果后端修改了用户权限，前端可能仍保留旧的权限缓存，导致用户看到不应看到的操作或无法访问新功能。需要设计合适的刷新机制（如定时拉取、权限变更后强制刷新）。