如何重构React应用中登录重定向的通用重复代码？

针对你遇到的多页面重复Auth0认证逻辑的问题，自定义Hook和父组件包装器都是合适的方案，下面分别给出具体实现和适用场景：

方案一：自定义Hook封装认证逻辑 #

自定义Hook用于抽离复用的状态和方法，让页面组件只需调用Hook获取所需内容，自行处理未认证的渲染逻辑，适合需要在页面中灵活操作认证状态的场景。

实现步骤： #

1. 创建自定义Hook文件（如useAuthGuard.js）：

import { useAuth0 } from '@auth0/auth0-react';

export function useAuthGuard() {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  const handleSignIn = async () => {
    await auth.login(loginWithRedirect);
  };

  return {
    isAuthenticated,
    handleSignIn,
    isUnauthenticated: !isAuthenticated
  };
}

2. 在页面组件中使用：

import { useAuthGuard } from './hooks/useAuthGuard';

export default function MyPage() {
  const { isUnauthenticated, handleSignIn } = useAuthGuard();

  if (isUnauthenticated) {
    return <SignIn onSignIn={handleSignIn} />;
  }

  // 页面原有业务逻辑
}

方案二：父组件包装器（Auth Wrapper） #

包装组件将认证判断和未认证渲染逻辑完全封装，页面组件只需专注于已认证后的内容，适合页面必须登录才能访问的场景，代码更简洁，关注点分离更彻底。

实现步骤： #

1. 创建认证包装组件（如RequireAuth.js）：

import { useAuth0 } from '@auth0/auth0-react';
import SignIn from './SignIn';

export function RequireAuth({ children }) {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  const handleSignIn = async () => {
    await auth.login(loginWithRedirect);
  };

  if (!isAuthenticated) {
    return <SignIn onSignIn={handleSignIn} />;
  }

  return children;
}

2. 使用包装组件包裹页面：

• 方式一：在路由中全局配置（以React Router为例）：

import { Routes, Route } from 'react-router-dom';
import RequireAuth from './components/RequireAuth';
import MyPage from './pages/MyPage';

function App() {
  return (
    <Routes>
      {/* 需要认证的页面 */}
      <Route path="/mypage" element={
        <RequireAuth>
          <MyPage />
        </RequireAuth>
      } />
      {/* 无需认证的页面直接渲染 */}
      <Route path="/public" element={<PublicPage />} />
    </Routes>
  );
}

• 方式二：在页面导出时直接包装：

// MyPage.js
function MyPage() {
  // 仅写已认证后的业务逻辑，无需处理认证判断
}

export default function MyPageWithAuth() {
  return (
    <RequireAuth>
      <MyPage />
    </RequireAuth>
  );
}

方案选择建议 #

• 如果页面需要根据认证状态做额外逻辑处理（比如显示登录/退出按钮），优先选择自定义Hook；
• 如果页面是纯需登录访问的内容，优先选择包装组件，减少页面冗余代码。

内容的提问来源于stack exchange，提问作者Steve Chambers