奇怪，请求失败，状态码 400

Question

我正在使用 Axios 向服务器发送请求。这是我使用的实例：

export default axios.create({
  baseURL: "https://wagal.com",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
    "Authorization": `Bearer ${store.getState().auth.userData.token}`,
  },
});

这是我如何使用上述实例来启用和禁用 2fa：

function switchTfa(data) {
  if (data) {
    return (dispatch) => {
      return api_request
        .post("/api/user/tfa/enable", {})
        .then((response) => {
          dispatch(isLoading(false));
          dispatch(
            userData({
              tfa_enabled: data,
              user_token: store.getState().auth.userData.token,
            })
          );
          console.log("Success");
        })
        .catch((error) => {
          dispatch(isLoading(false));
          console.log(`error.message`, error.message);
        });
    };
  } else {
    return (dispatch) => {
      dispatch(isLoading(true));
      return api_request
        .post("/web-api/user/tfa/disable", {})
        .then((response) => {
          dispatch(isLoading(false));
          dispatch(
            userData({
              tfa_enabled: data,
              user_token: store.getState().auth.userData.token,
            })
          );
          console.log("Success");
        })
        .catch((error) => {
          dispatch(isLoading(false));
          console.log(`error.message`, error.message);
        });
    };
  }
}

现在，如果我发送此请求，我会收到以下错误：

Request failed with status code 400

如果我在 Axios 实例中取消引用“授权”，它会起作用

export default axios.create({
  baseURL: "https://wagal.com",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
    Authorization: `Bearer ${store.getState().auth.userData.token}`,
  },
});

现在，如果我重新加载应用程序并发送请求，它会抛出这个 400 错误，但如果我再次用引号包裹“授权”，它会发送请求，奇怪！！！

为什么每次重新加载后我有时会通过引用和有时通过取消引用“授权”得到 400 个错误？

谢谢

Answer 1

这是因为存储不是持久的。正如我可以从您的代码中想象的那样，状态不是全局维护的，例如 Redux，因此当您刷新时，商店是空的。 理想情况下，当我们希望为 API 调用发送访问令牌时，您将有两种选择，

1. 将访问令牌以加密形式存储在本地存储中
2. 使用浏览器内存存储获取更安全的访问令牌

您可以在这里阅读更多信息：https://auth0.com/docs/security/data-security/token-storage#browser-in-memory-scenarios