ReactJS私有路由访问/profile报Maximum update depth exceeded错误求助

核心报错根源 #

你遇到的无限更新报错完全由ProtectedRoute的重定向逻辑错误导致：

• 当用户未登录（isAuth为false）时访问/profile路由，私有路由判定无权限后重定向的目标路径仍然是/profile，等于每次进入路由就触发重定向回当前路由，无限触发组件更新，超出React的更新深度限制就抛出了你看到的报错。

具体修改步骤 #

1. 修正ProtectedRoute.js的重定向逻辑 #

将未登录时的重定向目标改为公开路由，同时透传路由参数给子组件：

import React from 'react';
import {Route, Redirect} from "react-router-dom";

const ProtectedRoute = ({isAuth: isAuth, component: Component, ...rest }) => {
  return (
    <Route {...rest} render={(props) => {
      if (isAuth) {
        // 透传路由props，保证withRouter能正常拿到路由信息
        return <Component {...props} />
      } else {
       return  ( 
       // 重定向到公开首页，不要指向当前私有路由
       <Redirect to={{pathname: "/", state: {from: props.location }}} />
       );
      }
    }}/>
  );
};

export default ProtectedRoute;

2. 修正App.js的路由结构 #

你当前的路由没有用Switch包裹，会触发多路由同时匹配的异常，修改Router部分的代码如下：

return (
    <Router>
    <div className="app">
      {/* 原有页面展示逻辑保持不变 */}
{isAuth ?
  (

    <button onClick={logout} > logout </button>
  )
  :
  (
    <div className="auth">
        <div className="registration">

          <h1> Registration </h1>

          <label> Email </label>
          <input 
            type="email" 
            onChange={(e) => {
              setEmailRegistration(e.target.value);
            }} 
          />

          <label> Password </label>
          <input 
            type="password" 
            onChange={(e) => {
              setPasswordRegistration(e.target.value);
            }} 
          />

          <button onClick={register} > Register </button>

        </div>
        <div className="login">

          <h1> Login </h1>

          <label> Email </label>
          <input 
            type="email" 
            onChange={(e) => {
              setEmailLogin(e.target.value);
            }} 
          />

          <label> Password </label>
          <input 
            type="password" 
            onChange={(e) => {
              setPasswordLogin(e.target.value);
            }} 
          />

          <button onClick={login} > Login </button>

        </div>
      </div>

  )
}
    
    <br />
    <hr />
    <br />

    <button onClick={getArticles} >getArticles </button>
    <button onClick={testBearer} >testCookie </button>
    <button onClick={logout} > logout </button>
      {/* 新增Switch包裹路由，匹配到第一个符合规则的路由就停止匹配 */}
      <Switch>
        <Route exact path="/">
          {/* 这里放你的首页公开内容 */}
        </Route>
        <ProtectedRoute exact path="/profile" component={Profile} isAuth={isAuth} />
      </Switch>
   </div>

   </Router>
  )

3. 可选优化：持久化登录状态 #

你当前的isAuth默认值为false，页面刷新后登录状态会丢失，修改初始化逻辑：

// 原有useState替换为这行，初始化时判断本地是否有token
const [isAuth, setIsAuth] = useState(!!localStorage.getItem("token"));

JWT+js-cookie实现私有路由注意事项 #

• 生产环境优先使用httpOnly Cookie存储JWT，避免XSS攻击，安全性远高于localStorage
• 前端私有路由仅做页面跳转拦截，后端接口必须统一做JWT权限校验，不能依赖前端的路由判断做权限控制
• 可以把JWT携带逻辑统一封装到Axios请求拦截器里，不用每个请求单独加Authorization头

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