axios请求token在刷新页面时返回null答案

【问题标题】：axios request token returns null when refreshing pageaxios请求token在刷新页面时返回null
【发布时间】：2020-11-17 07:43:27
【问题描述】：

"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 并且我在 useeffect 中发送请求并且它可以工作，但是当我刷新页面 (F5)我从 redux 获取并将其添加到 axios 实例中的 token 是 null

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();
  }, []);

【问题讨论】：

只要确保在调用任何东西之前先拥有令牌。也就是说，你需要先获取token，然后在其他api调用中检查token。
我在 redux 商店里有它，但我怎么能确定在发送请求之前有它呢？有什么方法可以等待令牌或...？
将 token 作为 useEffect 钩子中的依赖项传递，当你有令牌执行请求时
是的，最简单的方法是在设置授权头之前检查令牌:)

标签： reactjs redux axios use-effect

【解决方案1】：

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

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

这个useEffect hook会在token发生变化时触发，例如：prevToken !== token，所以你还需要添加if语句在token不为null时执行请求

【讨论】：