如何解决React ProtectedRoute组件重复调用会话验证API的问题

嘿，我来帮你搞定这个问题！你遇到的多次API调用问题，主要有两个核心原因：一是你的useRef用法不符合React Hook规则（你把它放在了组件外面），二是每个ProtectedRoute实例都会单独发起请求，没有共享认证状态。下面给你两种实用的解决方案：

方案一：在ProtectedRoute内部正确使用useRef阻止重复请求 #

首先纠正你之前的错误：React Hook必须在组件函数内部调用，不能放在组件外面。我们把useRef移到组件里，通过它标记是否已经发起过认证请求，避免重复调用：

import React, { useState, useEffect, useRef } from 'react';
import { Route, Redirect } from 'react-router-dom';
import axios from 'axios';

const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {
  const [isAuth, setIsAuth] = useState(null);
  // 将useRef移至组件内部，用于标记是否已发起请求
  const hasFetchedAuth = useRef(false);

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await axios.get('/api/user/session');
        setIsAuth(response.data.status === "ok");
      } catch (error) {
        setIsAuth(false);
      }
    };

    // 仅当未发起过请求时执行API调用
    if (!hasFetchedAuth.current) {
      checkAuth();
      hasFetchedAuth.current = true;
    }
  }, []);

  if (isAuth === null) return <div>Loading...</div>;

  return (
    <Route path={path} {...rest} render={props => {
      if (isAuth) {
        return Component ? <Component {...props} /> : render(props);
      } else {
        return <Redirect to={`/signup?redirect=${props.location.pathname}${props.location.search}`} />;
      }
    }} />
  );
};

export default ProtectedRoute;

这个方法能确保单个ProtectedRoute实例只会发起一次认证请求，但如果你的应用里有多个ProtectedRoute，它们还是会各自发起请求——这时候方案二更合适。

方案二：用React Context全局共享认证状态（推荐） #

更好的思路是把认证状态提升到全局，在应用初始化时只验证一次，所有ProtectedRoute都共享这个状态，从根源上避免重复请求。我们用React Context来实现：

第一步：创建AuthContext管理全局认证状态 #

// src/contexts/AuthContext.js
import React, { createContext, useState, useEffect, useRef, useContext } from 'react';
import axios from 'axios';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuth, setIsAuth] = useState(null);
  const hasFetchedAuth = useRef(false);

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await axios.get('/api/user/session');
        setIsAuth(response.data.status === "ok");
      } catch (error) {
        setIsAuth(false);
      }
    };

    if (!hasFetchedAuth.current) {
      checkAuth();
      hasFetchedAuth.current = true;
    }
  }, []);

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

// 自定义Hook，方便组件快速获取认证状态
export const useAuth = () => useContext(AuthContext);

第二步：在App组件中包裹AuthProvider #

// src/App.js
import { AuthProvider } from './contexts/AuthContext';
import { Router } from 'react-router-dom';
import Layout from './Layout';
import ProtectedRoute from './ProtectedRoute';
import Library from './Library';

class App extends Component {
  render() {
    return (
      <AuthProvider>
        <Router>
          <div className="App" id="App">
            <Layout>
              <ProtectedRoute exact path="/library" component={Library} />
            </Layout>
          </div>
        </Router>
      </AuthProvider>
    )
  }
}

第三步：修改ProtectedRoute使用全局状态 #

// src/ProtectedRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useAuth } from './contexts/AuthContext';

const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {
  const { isAuth } = useAuth();

  if (isAuth === null) return <div>Loading...</div>;

  return (
    <Route path={path} {...rest} render={props => {
      if (isAuth) {
        return Component ? <Component {...props} /> : render(props);
      } else {
        return <Redirect to={`/signup?redirect=${props.location.pathname}${props.location.search}`} />;
      }
    }} />
  );
};

export default ProtectedRoute;

这样整个应用只会在初始化时发起一次/api/user/session请求，所有ProtectedRoute都共享同一个认证状态，彻底解决重复请求的问题。

额外小贴士 #

• 如果你的应用已经在用Redux或者其他状态管理库，可以把认证状态放到对应的store里，原理和Context一致。
• 记得处理会话过期的情况：比如用户长时间未操作导致会话失效，可以在axios拦截器里统一处理，或者在需要时触发重新验证。

内容来源于stack exchange