Intercept 401 error and prevent console error message

Published

I’m using the following library axios-auth-refresh to automatically refresh the token.

When I make a call to the API it returns a 401 error and in this way the library is triggered in order to execute the refresh token and ensure that all requests are successfully completed.

I’m using axios to make API calls and I also use interceptors. I’ve already tried to check if I get the 401 error in the response interceptor but that doesn’t happen, I always get the code 200.

Is there any way to prevent the 401 error in the browser?

Interceptors

axios.interceptors.request.use(request => {
  request.headers['Authorization'] = `Bearer ${sessionStorage.getItem("access_token")}`;
  return request;
});

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
});

axios-auth-refresh

const refreshAuthLogic = (failedRequest) => {
   
    return axios.post(url,
    {
        client: "Test",
        grant_type: "refresh_token",
        refresh_token: sessionStorage.getItem('refresh_token')
    }).then(tokenRefreshResponse => {
        failedRequest.response.config.headers['Authorization'] = 'Bearer ' + tokenRefreshResponse.data.access_token;
        sessionStorage.setItem("access_token", tokenRefreshResponse.data.access_token);
        sessionStorage.setItem("refresh_token", tokenRefreshResponse.data.refresh_token);
        return Promise.resolve();
    }).catch(function (e) {
        console.log("error", e);
    });
}

createAuthRefreshInterceptor(axios, refreshAuthLogic);

simple get

private extractData(res) {
    return res.data;
  }

  private handleErrorPromisse(error: Response | any) {
    console.error(error.message || error);
    return Promise.reject(error.message || error);
  }

  GetSample(): Promise<any> {
    return axios.get(url, {
      headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem("access_token")
      }
    })
      .then(this.extractData)
      .catch(this.handleErrorPromisse);
  }

problem

img

Source: Angular Questions

Published
Categorized as angular, axios, javascript, jwt, typescript Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq