MERN栈登录鉴权后访问About页仍被重定向至登录页问题排查

问题现象 #

• 预期逻辑：用户完成登录后可访问About（关于我们）页面，页面加载时展示当前登录用户信息；未登录状态访问About页时，自动重定向到登录页
• 实际异常：未登录状态访问About页可正常重定向，但用户完成登录操作后访问About页，仍被强制重定向到登录页，浏览器控制台输出错误：loadaboutUs Error: Request failed with status code 401
• 报错参考截图：

问题根因 #

整个鉴权链路的凭证传递断裂：你的鉴权中间件是从请求Cookie中读取jwtoken字段做合法性校验，但现有代码缺失三个关键逻辑：

• 后端登录接口校验账号密码通过后，没有把生成的JWT token写入名为jwtoken的Cookie
• 前后端分离跨域场景下，没有开启跨域携带Cookie的相关配置，就算后端下发了Cookie，前端请求也不会自动带上
• 你贴错了About页的前端代码，当前贴出的是登录页组件代码，About页本身的用户信息加载、鉴权跳转逻辑缺失

分步修复方案 #

1. 修复后端登录接口，登录成功时下发作鉴权用的Cookie #

找到后端处理/login路由的代码，在账号密码校验通过、生成JWT token之后，把token写入Cookie再返回成功响应，Cookie的key必须和鉴权中间件读取的jwtoken保持一致，参考代码：

// 登录接口核心逻辑，替换你原有登录成功分支的代码
router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;
    // 保留你原有的邮箱、密码校验逻辑
    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ msg: "Invalid Credentials" });
    const isPasswordMatch = await bcrypt.compare(password, user.password);
    if (!isPasswordMatch) return res.status(400).json({ msg: "Invalid Credentials" });

    // 保留你原有的JWT生成逻辑，注意token要存入用户的tokens数组，和鉴权中间件的查询逻辑对应
    const token = await user.generateAuthToken();

    // 关键：写入鉴权Cookie
    res.cookie('jwtoken', token, {
      httpOnly: true, // 禁止前端JS读取Cookie，防范XSS风险
      maxAge: 24 * 60 * 60 * 1000, // Cookie有效期和JWT有效期保持一致，示例为1天
      // 本地HTTP开发环境不要开secure，生产环境部署HTTPS时必须加secure: true
    });

    res.status(200).json({ userDetails: user });
  } catch (err) {
    console.log(err);
    res.status(500).send(err);
  }
})

额外注意：axios收到4xx/5xx状态码时会直接抛出异常进入catch分支，不会走到你写的if(user.status===400)判断里，需要把状态码判断放到catch块中，通过err.response.status获取状态码做错误提示。

2. 修复后端基础配置，支持跨域携带Cookie #

首先确认你已经注册了Cookie解析中间件，否则req.cookies会拿不到值；其次跨域配置不能用通配符*允许所有源，必须明确指定前端地址并开启凭证支持：

// app.js 全局配置部分
const cookieParser = require('cookie-parser');
const cors = require('cors');
app.use(cookieParser());
app.use(cors({
  origin: "http://localhost:3000", // 替换成你前端的实际访问地址
  credentials: true // 允许跨域请求携带Cookie
}));

你给出的鉴权中间件、/about路由逻辑本身没有问题，不需要修改。

3. 修复前端axios全局配置，自动携带Cookie #

前端需要给axios开启withCredentials配置，之后所有axios请求都会自动携带对应域名下的Cookie：

// 在前端入口文件（index.js/App.js）或者axios封装文件中加全局配置
import axios from 'axios';
axios.defaults.withCredentials = true;

4. 补全About页面的加载、鉴权逻辑 #

替换正确的About页代码，页面加载时主动请求/about接口拉取用户信息，接口返回401时直接跳转登录页：

// About.js 正确实现代码
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const About = () => {
  const [userInfo, setUserInfo] = useState(null);
  const navigate = useNavigate();

  const loadAboutUs = async () => {
    try {
      const res = await axios.get('/about');
      setUserInfo(res.data);
    } catch (err) {
      console.log('loadaboutUs Error:', err.message);
      // 401状态码代表未登录/登录态失效，直接跳转登录页
      if (err.response?.status === 401) {
        navigate('/login');
      }
    }
  };

  useEffect(() => {
    loadAboutUs();
  }, []);

  return (
    <div className="about-container">
      <h2>关于我们</h2>
      {userInfo && (
        <div className="user-info-card">
          <p>用户名：{userInfo.name}</p>
          <p>邮箱：{userInfo.email}</p>
        </div>
      )}
    </div>
  )
};

export default About;

验证方式 #

修改完成后重启前后端服务，清空浏览器现有缓存Cookie，重新走登录流程：

• 登录成功后打开浏览器开发者工具-应用-Cookie，能看到对应域名下存在jwtoken字段
• 访问About页时请求头自动携带Cookie，接口返回200状态码和用户信息，不再报401错误
• 手动删除jwtoken Cookie后访问About页，会正常重定向到登录页

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