Vite6+React18+Ts项目-12.简单封装后台GuardAuth组件，控制页面内容和按钮是否显示

权限控制是一个常见的需求。我们需要根据用户的权限级别来决定是否显示某些页面内容或功能按钮。本文将介绍如何封装一个简单的GuardAuth组件来实现这一功能。

1.为什么需要权限控制组件

在后台管理系统中，不同角色的用户通常拥有不同的权限。如管理员可以看到所有功能和数据，而普通用户只能看到部分功能，如果直接在业务代码中写权限判断逻辑会导致代码重复且难以维护。通过封装权限控制组件，我们可以集中管理权限逻辑，提高代码复用性，使业务代码更简洁。

2.组件简单实现

import useAuthStore from '@/stores/auth/auth.store';

interface GuardAuthProps {
  children: React.ReactNode;
}

const GuardAuth = ({ children }: GuardAuthProps) => {
  // 默认无权限
  let isAuthenticated = false;

  // 如果同时获取多个值可使用 useShallow
  const userType = useAuthStore((state) => state.code)

  if (userType == 'admin') {
    isAuthenticated = true;
  }

  // 如果有权限，渲染子组件
  return isAuthenticated ? <>{children}</> : null;
};

export default GuardAuth;

状态管理：使用useAuthStore从全局状态中获取用户权限信息

权限判断：当前示例中只判断用户是否为admin，实际项目中可以根据需求扩展

条件渲染：根据权限决定是否渲染子组件

3.使用示例

import GuardAuth from '@/components/GuardAuth';

function AdminPage() {
  return (
    <div>
      <h1>管理员面板</h1>
      
      <GuardAuth>
        <button>删除用户</button>
      </GuardAuth>
      
      <GuardAuth>
        <section>
          <h2>敏感数据</h2>
          <p>只有管理员能看到的内容</p>
        </section>
      </GuardAuth>
    </div>
  );
}

4.自定义扩展功能

支持多种角色：可以扩展组件支持多种角色判断

interface GuardAuthProps {
  children: React.ReactNode;
  roles?: string[]; // 允许传入角色数组
}

const GuardAuth = ({ children, roles = [] }: GuardAuthProps) => {
  const userRole = useAuthStore((state) => state.code);
  return roles.includes(userRole) ? <>{children}</> : null;
};

支持权限码：可以使用权限码而非角色进行控制

interface GuardAuthProps {
  children: React.ReactNode;
  permission?: string; // 权限码
}

添加fallback：可以为无权限情况提供备选内容

interface GuardAuthProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

const GuardAuth = ({ children, fallback = null }: GuardAuthProps) => {
  // ...权限判断逻辑
  return isAuthenticated ? <>{children}</> : fallback;
};

性能优化：对于频繁使用的场景，可以使用React.memo进行优化