达到过期时间时刷新 JWT 令牌答案

【问题标题】：refresh JWT token when expire time is reached达到过期时间时刷新 JWT 令牌
【发布时间】：2021-06-28 08:39:04
【问题描述】：

我正在开发一个 React 本机应用程序，我需要在我的敏感请求上设置 Authentication 标头。但是我的 accessToken (JWT) 会在 10 秒后过期。因此，在任何请求之前，我必须检查令牌是否已过期使用 refreshToken 更新它，然后再次调用最后一个请求。

除了最后一部分（粗体字）之外，我可以做到所有这些。

我正在使用 Axios 向服务器发送请求。有什么想法吗？

【问题讨论】：

标签： react-native axios jwt

【解决方案1】：

所以想法是使用一个响应拦截器，它在响应可用之后，但在它被传递到代码之前。

寻找unauthenticated错误，对应statusCode 401

请记住，这是一个伪代码，您必须修改一些部分，例如 auth.setToken().

const createAxiosResponseInterceptor = () => {
  const interceptor = axios.interceptors.response.use(
    (response) => response,
    (error) => {
      // Reject promise if not 401 error
      if (error.response.status !== 401) {
        return Promise.reject(error);
      }

      /*
       * When response code is 401, try to refresh the token.
       * Remove the interceptor so it doesn't loop in case
       * token refresh causes the 401 response
       *
       * Also eject the interceptor to prevent it from working again if the REFRESH request returns 401 too
       */
      axios.interceptors.response.eject(interceptor);

      return axios({
        url: API_REFRESH_URL,
        method: "POST",
        withCredentials: true,
      })
        .then((response) => {
          auth.setToken(response.data.access_token);
          error.response.config.headers["Authorization"] =
            "Bearer " + response.data.access_token;
          return axios(error.response.config);
        })
        .catch((error) => {
          auth.removeToken();
          return Promise.reject(error);
        })
        .finally(createAxiosResponseInterceptor);
    }
  );
};

createAxiosResponseInterceptor();

error.response.config 包含有关旧请求的所有数据，因此我们可以重复它。请记住，在完成刷新请求后，我们再次在.finally(create...Interceptor) 中应用拦截器

更多详情请看this question，官方文档here

【讨论】：