React Router onEnter钩子鉴权引发无限循环问题求助

嘿，这个无限循环的坑我之前也踩过！咱们来理清楚问题出在哪，然后一步步解决它～

问题根源 #

你当前的requireAuth逻辑和钩子位置都有问题：

1. 逻辑搞反了：你现在是「已登录就重定向到/dashboard」，但当用户已经在/dashboard页面时，这个钩子还是会触发，重复执行replace('/dashboard')，直接陷入无限循环。
2. 钩子位置不对：你把onEnter加在了dashboard路由的父路由上，意味着只要访问这个父路由下的任何路径（包括/dashboard）都会触发钩子，进一步加剧了循环问题。

修复方案 #

1. 修正鉴权函数逻辑

我们的鉴权函数应该做的是：当用户未登录时，阻止访问受保护的路由，重定向到登录页（你的/路径）；已登录则允许正常访问。修改后的代码：

function requireAuth(nextState, replace) {
  if (!isLoggedIn()) { // 判断用户未登录的情况
    console.log("user is NOT logged in");
    replace('/'); // 未登录就跳转到首页（登录页）
  }
  // 已登录的话什么都不用做，让路由正常跳转
}

2. 把钩子放在正确的路由上

只给需要保护的/dashboard路由添加onEnter钩子，而不是它的父路由：

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          {/* 把鉴权钩子直接绑定到需要保护的dashboard路由 */}
          <Route path="dashboard" component={AllEvents} onEnter={requireAuth} />
          {/* 这里可以添加你的登录页路由，如果有的话 */}
          {/* <Route path="login" component={LoginComponent} /> */}
        </Route>
      </Router>
    </div>
  );
};

额外优化（可选） #

如果你的首页（/）是登录页面，你可以再加一个反向的钩子，让已登录的用户自动跳转到仪表盘，避免停留在登录页：

function redirectIfLoggedIn(nextState, replace) {
  if (isLoggedIn()) {
    replace('/dashboard');
  }
}

// 给首页路由添加这个钩子
<Route path="/" component={App} onEnter={redirectIfLoggedIn}>
  <Route path="dashboard" component={AllEvents} onEnter={requireAuth} />
</Route>

这样调整后，鉴权逻辑就清晰了，也不会再出现无限循环的问题啦！

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