Back

Technologies:

javascriptjavascript
node.jsnode.js
avatar
Tolerim
a month ago

Can the axios api be called again within its catch statement?

When a user calls an API, the server backend validates their accessToken. If the token is expired, the server returns a 401 response, and the webpage requests new tokens with the refreshToken. The code structure for this process is provided below: 

this.$apiInstance.post(
      `${process.env.VUEAPPSERVERURL}/companies/changePassword`,
      {
        currentPassword: pwCurrent,
        newPassword: pwNew
      }
    )
    .then((response) => {
      // do something
    })
    .catch((error) => {
      if(sessionStorage.getItem('refreshToken')) {
        this.$store.dispatch('requestAccessToken');
        // call the API again
        this.$apiInstance.post(
          `${process.env.VUEAPPSERVERURL}/companies/changePassword`,
          {
            currentPassword: pwCurrent,
            newPassword: pwNew
          }
        )
        .then((response) => {
          // do something
        })
        .catch((error) => {
          // handle error
        });
      }
    });
If the server returns 401 response in the catch statement, you can recall the API again by including the required code in the if statement. Utilize the same code structure as before, but remove the initial accessToken validation and refresh token request. Instead, directly call the API.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
An access token is a tiny piece of code that contains a large amount of data. It is used to authenticate and authorize clients to securely call protected web APIs. Web APIs use access tokens to perform authentication and authorization. The access token represents the authorization of a specific application to access specific parts of a user’s data. Access tokens do not have to be of any particular format, although there are different considerations for different options which will be discussed later in this chapter. I hope this helps! Let me know if you have any other questions.

Sources

Access Token: Definition, Architecture, Usage & More | OktaAccess Tokens - OAuth 2.0 SimplifiedMicrosoft identity platform access tokens - Microsoft EntraAccess Tokens - Win32 apps | Microsoft LearnAccess token - Wikipedia
avatar
Tolerim
a month ago
To recall the API in the catch statement, you can use the error.config object to get the original request configuration and then re-send the request using the same configuration. Here's an example: 
.catch((error) => {
  if (sessionStorage.getItem('refreshToken')) {
    this.$store.dispatch('requestAccessToken')
      .then(() => {
        // Get the original request configuration
        const config = error.config;
        // Resend the request using the same configuration
        return this.$apiInstance(config);
      })
      .then((response) => {
        // Handle the response
      })
      .catch((error) => {
        // Handle the error
      });
  }
});
In this example, we first dispatch the requestAccessToken action to get a new access token using the refresh token. Once we have the new access token, we use the error.config object to get the original request configuration, including the request method, URL, and data. We then resend the request using the same configuration by calling this.$apiInstance(config). Finally, we handle the response or error as needed.
;