Reactjs 更新存储在jwt有效负载中的字段

我正在使用passport.js和jwt对我的应用程序中的用户进行身份验证。我正在使用一个有效载荷对jwt令牌进行签名，该有效载荷包括一个虚拟角色字段，以便在我的应用程序中使用虚拟角色。 现在，我希望用户能够编辑他们的头像。我实现了这一功能，但解决了一个问题：即使在mongodb中更新了avatar字段，但只有在我注销并重新登录后，这些更改才会显示在应用程序中。（令牌重新签名后）

在前端，我使用react+redux

考虑到这是有效载荷的一部分，我应该如何以正确的方式更新此化身字段？我应该使用另一种方法吗

代码如下：

下面是登录：

 User.findOne({ email: email }).then(user => {
    if (!user) {
      return res.status(404).json({
        email: "Couldn't find an account."
      });
    } else {
      bcrypt.compare(password, user.password).then(isMatch => {
        if (isMatch) {
          //User matched

          //Create JWT Payload (can contain any user info)
          const payload = {
            id: user.id,
            firstname: user.firstname,
            lastname: user.lastname,
            email: user.email,
            avatar: user.avatar
          };

          //Sign token
          //The sign method from jwt needs a payload(user info), secret and optional expiration date
          //This token is needed so the user can access private routes or any other private logic
          jwt.sign(
            payload,
            keys.secretOrKey,
            { expiresIn: "1d" },
            (err, token) => {
              res.json({
                success: true,
                token: "Bearer " + token
              });
            }
          );
        } else {
          return res
            .status(400)
            .json({ password: "Eroare! Parola incorecta!" });
        }
      });
    }
  });
});

重复操作：

// Login

export const loginUser = userData => dispatch => {
  axios
    .post("/api/users/login", userData)
    .then(res => {
      //Save to localStorage
      const { token } = res.data;
      //Set token to localStorage
      localStorage.setItem("jwtToken", token);
      // Set token to Auth Header
      setAuthToken(token);
      // Decode token
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err => {
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      });
    });
};

//Set logged in user

export const setCurrentUser = decoded => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded
  };
};

减速器：

const initialState = {
  isAuthenticated: false,
  user: {},
  loading: false
};

export default function(state = initialState, action) {
  switch (action.type) {
    case USER_LOADING:
      return {
        ...state,
        loading: true
      };
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
    default:
      return state;
  }
}

---

基本上，在JWT令牌的有效负载中，有一些信息对您的前端代码非常有用，例如电子邮件、用户名、化身等等

但由于JWT令牌只能在服务器上进行验证和发布（它只能在前端解码，因为前端不知道JWT秘密），所以每当您需要JWT负载中的新信息时，都需要在服务器上发布新令牌

根据您的情况，您需要在更新avatar后发布新的JWT令牌，并在updateAvatar API的响应中发回JWT令牌

---

之后，您可以使用新的JWT令牌更新localStorage，并在前端获得新的化身。

基本上，在JWT令牌的有效负载中，有一些信息对您的前端代码非常有用，例如电子邮件、用户名、化身等

但由于JWT令牌只能在服务器上进行验证和发布（它只能在前端解码，因为前端不知道JWT秘密），所以每当您需要JWT负载中的新信息时，都需要在服务器上发布新令牌

根据您的情况，您需要在更新avatar后发布新的JWT令牌，并在updateAvatar API的响应中发回JWT令牌

---

之后，您可以使用新的JWT令牌更新localStorage，并在前端获得新的化身。

我猜您可以在用户更改化身后签署新的JWT令牌，并在updateAvatar API的响应中将其发送回。然后在前端，你可以用这个新的令牌更新localStorage吗？你能告诉我们显示化身的组件代码wr，并且从wr中调用登录操作吗？@HoangTrinh这就是帮助我解决这个问题的原因。发布一个答案，我会批准它。@OvidiuG:谢谢你让我知道，我发布了答案。我想你可以在用户更改化身后签署新的JWT令牌，并在updateAvatar API的响应中发回。然后在前端，你可以用这个新的令牌更新localStorage吗？你能告诉我们显示化身的组件代码wr，并且从wr中调用登录操作吗？@HoangTrinh这就是帮助我解决这个问题的原因。发布答案，我会批准。@OvidiuG:谢谢你让我知道，我发布了答案。