React MPA授权实现与多页面管理优化问题咨询

嘿，我来帮你梳理下这些React开发里的常见问题，咱们一个个拆解清楚：

完全不用每个组件都写一遍登录状态检查的fetch！最靠谱的做法是封装统一的授权服务层+全局状态管理：

• 先写一个专门的授权工具文件（比如authService.js），把登录状态检查、token验证这些逻辑封装成可复用的函数：

  // authService.js
  export const checkAuthStatus = async () => {
    try {
      const token = localStorage.getItem('authToken');
      if (!token) return null;
      const res = await fetch('/api/auth/me', {
        headers: { Authorization: `Bearer ${token}` }
      });
      return res.ok ? await res.json() : null;
    } catch (err) {
      console.error('Auth check failed:', err);
      return null;
    }
  };
  

• 然后用React Context或者轻量状态管理库（比如Zustand、Jotai）把登录状态全局共享。比如创建一个AuthContext，在App初始化时调用checkAuthStatus，把状态存在Context里，所有需要判断登录的组件直接用useContext(AuthContext)获取状态，不用重复发请求。
• 还可以加个缓存逻辑：比如把用户信息存在localStorage里，每次先读缓存，只有缓存过期或者验证失败时再发请求，进一步减少重复调用。

带回调的组件返回布尔值这种方式太绕了，推荐更简洁的方案：

• 写一个自定义HookuseAuth，把登录状态、用户信息、登录/登出方法都封装进去：

  // useAuth.js
  import { useContext } from 'react';
  import { AuthContext } from './AuthContext';
  
  export const useAuth = () => {
    const context = useContext(AuthContext);
    if (!context) throw new Error('useAuth must be used within an AuthProvider');
    return context;
  };
  

• 导航栏组件里直接用这个Hook，根据isLoggedIn渲染不同按钮：

  // Navbar.js
  import { useAuth } from './useAuth';
  
  export const Navbar = () => {
    const { isLoggedIn, logout } = useAuth();
    return (
      <nav>
        <a href="/">首页</a>
        {isLoggedIn ? (
          <>
            <a href="/profile">个人中心</a>
            <button onClick={logout}>退出登录</button>
          </>
        ) : (
          <a href="/login">登录</a>
        )}
      </nav>
    );
  };
  

• 页面跳转的话，用路由守卫组件（比如RequireAuth）包裹需要授权的路由，没登录就自动跳登录页：

  // RequireAuth.js
  import { Navigate, useLocation } from 'react-router-dom';
  import { useAuth } from './useAuth';
  
  export const RequireAuth = ({ children }) => {
    const { isLoggedIn } = useAuth();
    const location = useLocation();
  
    if (!isLoggedIn) {
      // 登录后跳回原来的页面
      return <Navigate to="/login" state={{ from: location }} replace />;
    }
  
    return children;
  };
  

  然后在路由配置里用它：

  // App.js
  import { Routes, Route } from 'react-router-dom';
  import { RequireAuth } from './RequireAuth';
  import { Home } from './Home';
  import { Profile } from './Profile';
  import { Login } from './Login';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/profile" element={
          <RequireAuth>
            <Profile />
          </RequireAuth>
        } />
      </Routes>
    );
  }
  

这种做法会让组件越来越臃肿，复用性差，后期维护起来头疼。更好的方式是用布局组件统一管理公共部分：

• 先创建一个Layout组件，把导航栏、页脚这些所有页面都有的元素放进去，然后留一个插槽（children）放页面独有的内容：

  // Layout.js
  import { Navbar } from './Navbar';
  import { Footer } from './Footer';
  
  export const Layout = ({ children }) => {
    return (
      <div className="app-container">
        <Navbar />
        <main className="content">{children}</main>
        <Footer />
      </div>
    );
  };
  

• 然后在路由配置里，用Layout包裹所有页面（或者需要公共布局的页面）：

  // App.js
  <Routes>
    <Route element={<Layout />}>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<RequireAuth><Profile /></RequireAuth>} />
    </Route>
    <Route path="/login" element={<Login />} /> {/* 登录页不需要导航栏的话就单独放 */}
  </Routes>
  

  这样每个页面组件只需要专注自己的核心UI，公共部分在Layout里统一维护，改导航栏只需要动一个文件就行，复用性和可维护性都大大提升。

页面切换时组件会卸载，如果不清理一些资源，很容易导致内存泄漏，除了setInterval，还要注意：

• 清理setTimeout、requestAnimationFrame这类定时器，比如在组件的useEffect里返回清理函数：

  useEffect(() => {
    const timer = setTimeout(() => { /* ... */ }, 1000);
    const rafId = requestAnimationFrame(() => { /* ... */ });
    return () => {
      clearTimeout(timer);
      cancelAnimationFrame(rafId);
    };
  }, []);
  

• 取消未完成的网络请求：用AbortController，在组件卸载时abort请求：

  useEffect(() => {
    const controller = new AbortController();
    const fetchData = async () => {
      try {
        const res = await fetch('/api/data', { signal: controller.signal });
        // 处理数据
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      }
    };
    fetchData();
    return () => controller.abort();
  }, []);
  

• 移除全局事件监听器：比如window.resize、scroll，组件卸载时要调用removeEventListener：

  useEffect(() => {
    const handleResize = () => { /* ... */ };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  

• 重置组件内部状态：比如表单输入值、临时弹窗状态，避免切换页面后状态残留（如果用了全局状态的话，不需要，局部状态组件卸载会自动清空，但如果是引用类型的状态要注意）
• 销毁第三方库实例：比如ECharts、地图组件，很多第三方库需要手动销毁实例，不然会留在内存里

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