时间戳

首页 > 解决方案 > axios请求token在刷新页面时返回null

reactjs - axios请求token在刷新页面时返回null

问题描述

"axios": "^0.20.0",
"react": "^16.14.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"

我正在使用axios，并且我正在发送一个使用效果的请求，它可以工作，但是当我刷新页面（F5）时，我从 redux 获取并将其添加到 axios 实例中的令牌为空

axios.interceptors.request.use(
  function (config) {
    const token = store.getState().auth.token;
    config.headers.Authorization = `Bearer ${token}`;
    // Do something before request is sent
    console.log("req config", config);
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

这只是一个 api 调用，在刷新时我的令牌是'Bearer null'：

  useEffect(() => {
    getAssessments();
    getGroups();
    getAssessmentUsers();
  }, []);

标签： reactjsreduxaxiosuse-effect

解决方案

您需要在刷新后等待令牌rehydrated在您的 redux 存储中，它不会立即发生。如果这仍然不起作用，您需要验证令牌是否与redux-persist.

useEffect(() => {
  if (token) {
    getAssessments();
    getGroups();
    getAssessmentUsers();
  }
}, [token]);

这个 useEffect 钩子会在token更改时触发，例如：prevToken !== token，所以你还需要添加 if 语句来在 token 不为 null 时执行请求

推荐阅读