使用Passport与Auth0实现Google登录后无法重定向至用户个人资料页

1. 修正后端回调中间件顺序 #

你的后端回调路由存在中间件执行顺序错误：userController.loginUser被放在了res.redirect之后，而Express中间件是按顺序执行的，res.redirect会直接结束请求响应，导致后续的userController.loginUser完全不会运行。如果这个控制器是生成JWT、初始化用户会话的核心逻辑，前端就拿不到必要的认证状态，最终被路由守卫判定为未登录，强制跳回首页。

调整代码顺序，将userController.loginUser移到自定义回调函数之前：

router.get(
  "/auth/google/callback",
  passport.authenticate("google", { failureRedirect: "/login" }),
  userController.loginUser, // 先执行登录逻辑，生成JWT/初始化会话
  (req, res) => {
    // 此时userObj已被正确处理
    res.redirect(`${process.env.CLIENT_URL}/online-rest-client/${userObj.username}`);
  }
);

2. 后端重定向时传递认证状态 #

后端重定向到前端时，必须把JWT或用户认证信息传递给前端，否则前端的UserContext不会更新，路由守卫仍会判定用户未登录。推荐两种安全的传递方式：

• URL查询参数（快速验证用）：

  // 假设loginUser已生成token并存入req.user
  res.redirect(`${process.env.CLIENT_URL}/online-rest-client/${userObj.username}?token=${req.user.token}`);
  

• HttpOnly Cookie（生产环境推荐）：

  res.cookie('authToken', req.user.token, { httpOnly: true, secure: process.env.NODE_ENV === 'production' });
  res.redirect(`${process.env.CLIENT_URL}/online-rest-client/${userObj.username}`);
  

3. 前端处理Google登录后的重定向 #

你的Login组件仅处理了邮箱密码登录逻辑，完全没处理Google登录后后端重定向过来的场景。需要在个人资料页组件或全局路由逻辑中，读取后端传递的认证信息并更新UserContext：

示例：在个人资料页中处理 #

const UserProfile = () => {
  const { setUserDetails } = useContext(UserContext);
  const navigate = useNavigate();
  const params = useParams();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 读取URL中的token参数
    const token = searchParams.get('token');
    if (token) {
      // 解析token获取用户信息（需安装jwt-decode包）
      const decodedToken = jwtDecode(token);
      setUserDetails({
        isLoggedIn: true,
        token,
        email: decodedToken.email,
        username: params.username,
        userId: decodedToken.userId
      });
      localStorage.setItem("token", JSON.stringify({ token, ...decodedToken }));
      // 移除URL中的token参数，避免重复处理
      searchParams.delete('token');
      navigate(`/online-rest-client/${params.username}`, { replace: true });
    } else {
      // 检查本地存储是否已有认证信息
      const savedToken = JSON.parse(localStorage.getItem("token"));
      if (!savedToken) navigate("/login");
    }
  }, [setUserDetails, navigate, params, searchParams]);

  // 组件其余逻辑...
};

4. 检查前端路由守卫逻辑 #

确保路由守卫不会误判已登录用户的状态。示例路由配置：

const App = () => {
  const { userDetails } = useContext(UserContext);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route 
          path="/online-rest-client/:username" 
          element={userDetails.isLoggedIn ? <UserProfile /> : <Navigate to="/login" />} 
        />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

5. 验证重定向URL的准确性 #

即使你确认了配置变量正确，仍建议在后端回调中打印完整重定向URL，排查拼写错误：

const redirectUrl = `${process.env.CLIENT_URL}/online-rest-client/${userObj.username}`;
console.log('Redirecting to:', redirectUrl);
res.redirect(redirectUrl);

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