React中使用JWT获取用户信息：如何借助localStorage存储的token拉取用户数据

后端getCurrentUser接口逻辑实现 #

你的token生成时绑定了user._id，核心逻辑是解密token拿到用户ID，再查询数据库返回用户信息，完整代码如下：

// 需提前引入生成token用的jsonwebtoken库、User模型
const jwt = require('jsonwebtoken');
const User = require('./你的User模型文件路径');

module.exports.getCurrentUser = async (req, res) => {
  const { token } = req.body;
  try {
    // 1. 验证并解密token，第二个参数要和生成token时用的密钥完全一致
    const decoded = jwt.verify(token, process.env.JWT_SECRET); 
    // 2. 用解密得到的用户ID查库，过滤掉密码等敏感字段
    const user = await User.findById(decoded.id).select('-password');
    if (!user) {
      return res.status(404).json({ message: "用户不存在" });
    }
    // 3. 正常返回用户信息
    return res.status(200).json(user);
  } catch (error) {
    // 捕获token无效、过期等错误，返回登录失效提示
    return res.status(401).json({ message: "身份验证失效，请重新登录" });
  }
};

如果你的tokenGenereator不是基于jsonwebtoken库实现的，替换成对应库的解密方法即可，只要保证解密密钥和生成密钥一致。

前端调用逻辑修正 #

你存储token时用了JSON.stringify，取出时需要先做解析，示例代码如下：

// 调用fetchUser前先从localStorage取出token
const token = JSON.parse(localStorage.getItem('userToken'));
dispatch(fetchUser(token));

// fetchUser拿到返回后更新全局用户状态
export const fetchUser = (token) => {
  return async (dispatch) => {
    try {
      const user = await api.getUserData({ token });
      dispatch(setUser({
        fullname: user.data.fullname,
        email: user.data.email,
        isAuth: true,
      }));
    } catch (error) {
      // 身份验证失败时清空本地存储跳转到登录页
      localStorage.removeItem('userToken');
      window.location.href = '/login';
    }
  };
};

注意：你现有前端login代码存在取值错误，后端login接口返回的用户信息在result字段下，正确取值应为userData.data.result.fullname、userData.data.result.email，否则登录后存入全局状态的用户信息是空的。

优化建议 #

• 行业通用规范是将token放在请求头的Authorization字段中，格式为Bearer <token>，比放在请求体中更安全也更符合接口设计规范。
• token本身是纯字符串，存储时可以不用JSON.stringify，直接localStorage.setItem("userToken", userData.data.token)即可，取出时也不需要解析，减少冗余操作。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas