JWT 中的刷新和访问令牌流

Question

I have developed a standard JWT system that logs in and issues an access token and a refresh token. The access token expires after a short amount of time and there is a route to refresh the token.

I use axios to make requests but I am not sure how to deal with expired tokens. For example, if I make a request to /secret_route with my access token and it's expired, do I need to wait for a 403 and then make a request to /refresh_token and then make the original request again? Seems messy from a programming point of view and quite wasteful on the network. Is there an efficient/elegant way to do this?

Answer 1

I ended up with a solution that I feel is more robust than checking the timestamp. Thanks @Bergi but I am concerned about the system clock. I use axios interceptors to refresh the token on a 401

  // Request interceptor for API calls
  axios.interceptors.request.use(
    async config => {
      config.headers = { 
        'Authorization': `Bearer ${localStorage.getItem("accessToken")}`,
        'Accept': 'application/json',
      }
      return config;
    },
    error => {
      Promise.reject(error)
  });

  // Allow automatic updating of access token
  axios.interceptors.response.use(response => response, async (error) => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const res = await axios.post('/users/token', { token: localStorage.getItem('refreshToken') });
      setToken(res.data.accessToken);

      return axios.request(originalRequest);
    }
    return Promise.reject(error);
  });

Adapted from https://thedutchlab.com/blog/using-axios-interceptors-for-refreshing-your-api-token