使用AuthContext实现ProtectedRoute时登录功能异常求助

你的代码存在几个关键问题，导致登录后AuthContext状态无法正确更新，进而让ProtectedRoute拦截跳转请求，以下是具体问题和修复步骤：

1. 未正确调用useAuthDispatch钩子 #

在LoginComponent.jsx中，你只是引用了useAuthDispatch钩子本身，没有执行它来获取dispatch函数：

错误代码：

const authDispatch = useAuthDispatch;

修复后：

const authDispatch = useAuthDispatch();

只有调用钩子才能拿到上下文里的dispatch函数，否则authDispatch只是一个函数引用，无法触发reducer更新状态。

2. 重复嵌套AuthProvider导致上下文隔离 #

index.js已经在根节点外层包裹了AuthProvider，但App.js中又嵌套了一层AuthProvider，这会导致：

• LoginComponent使用的是App内层的上下文
• ProtectedRoute使用的是index外层的上下文
  两者状态完全独立，登录后内层状态更新，但外层状态还是未认证，所以跳转后会被拦截。

修复方法：移除App.js中的AuthProvider包裹：

修改后的App.js：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProtectedRoute from "./context/ProtectedRoute";
import HomePage from "./home/HomePage";
import ErrorPage from "./errorPage/ErrorPage";
import LoginComponent from "./auth/login/LoginComponent";
import LandingPage from "./landingPage/LandingPage";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginComponent />} />

        <Route element={<ProtectedRoute />}>
          <Route path="/dashboard" element={<LandingPage />} />
        </Route>

        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

3. 表单输入变量未定义 #

LoginComponent.jsx中loginInputs用到的email和password没有声明，需要添加状态管理：

添加以下代码到组件顶部：

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

同时在表单元素中绑定这两个状态：

<input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="邮箱"
/>
<input
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  placeholder="密码"
/>

4. axios请求URL未加引号 #

axios.post的第一个参数URL是字符串，必须用引号包裹：

错误代码：

const { data } = await axios.post(
  http://x.x.x.x/api/login,
  loginInputs,
  config
);

修复后：

const { data } = await axios.post(
  "http://x.x.x.x/api/login",
  loginInputs,
  config
);

额外优化建议 #

• 登录成功后将token存入localStorage，并在AuthProvider初始化时从localStorage读取，避免刷新页面后状态丢失：

// AuthContext.jsx中初始化state
const [state, dispatch] = useReducer(AuthReducer, {
  isAuthenticated: localStorage.getItem("token") ? true : false,
  token: localStorage.getItem("token") || null,
});

// LoginComponent登录成功时存入
localStorage.setItem("token", token);
authDispatch({ type: "LOGIN", payload: { token } });

• 错误处理时设置具体错误信息，方便用户排查：

catch (error) {
  setError(error.response?.data?.message || "登录失败，请稍后重试");
}

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