Vue axios implementation refresh token and continue the previous request how to break?

how can the vue axios implementation refresh the token and continue the previous request? How to set it in the interceptor, can you provide the code?
my settings in the interceptor are as follows, but I will not proceed with the current request. Suppose I want to obtain a list information. When the token expires, such a setting will not continue the request for list information after refreshing the token. What is the problem and how to solve it?

instance.interceptors.request.use(config => {
      if (!config.url.includes("/users")) {
        config.headers["x-access-token"] = Cookies.get(TOKEN_KEY)
        config.headers["Authorization"] = "Bearer " + Cookies.get(TOKEN_KEY)
      }
      if(Cookies.get(TOKEN_KEY)) {
        if(isTokenExpired() && config.url.indexOf("refresh") === -1) {
          console.log(window.isRefreshing);
          if(!window.isRefreshing) {
            window.isRefreshing = true;
            store.dispatch("refreshToken").then(function () {
                config.headers["x-access-token"] = Cookies.get(TOKEN_KEY)
                config.headers["Authorization"] = "Bearer " + Cookies.get(TOKEN_KEY)
                window.isRefreshing = false;

            })
          }
        }
      }

      // loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 
      }
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
Sep.23,2021

use the axios interceptor, and update it to sessionStore if you have token.

https://www.kancloud.cn/yunye.

you can refer to this document for interceptor writing


token should be reacquired when it expires, and should not be forcibly refreshed. When the token is not out of date, you can use a request to refresh it at the appropriate time, such as when the page is refreshed. The purpose of refreshing token is to check whether the user is recently active and extend the token, rather than waiting for the token to expire.
refresh with special requests, not in other business interfaces.


if you guess correctly, refreshToken this action is asynchronous, right?
may not have updated token , and the interceptor function has already return config .


is processed in the response interceptor. Judge response.status if token expires (401? ), use refreshToken to refresh. After obtaining the new token, call axios.request (response.config) to re-initiate the request.


axios-auth-refresh the npm package


you can take a look at this article
https://codeshelper.com/a/11.

"
Menu