Why authorization token exists in axios interceptors even after deleting the token?

Question

I am building a project where I store my auth token in the localstorage.

Here is my index.js code:

axios.defaults.headers.common['Authorization']= localStorage.getItem('token');

axios.interceptors.request.use(request=>{
  console.log(request);
  return request;
}, error=>{
  console.log(error);
  return Promise.reject(error);
});



ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Once I login the login button changes to logout button and upon clicking logout button the localstorage token is deleted

Here is the code:

 <Button onClick={()=>{localStorage.removeItem('token')}}>Log Out</Button>

After clicking on the logout button when i inspect in the application tab of the devtools i could see that the token has been deleted but when i make some other request after logging out i could see that the token persists in the req consoled by the axios interceptors.

When i reload the page then the token disappears from the axios interceptors but not automatically after loggin out.

Please guide me on what is wrong with my logic also let me know if more information is required.

Answer 1

The token persists in the interceptors because in the onClick event you are removing the token just from the storage, but not from the interceptors themselves.

To remove it, you must change or delete the value of the header:

 <Button onClick={()=>{
    localStorage.removeItem('token')
    axios.defaults.headers.common['Authorization'] = ''

    // Other options are:
    // axios.defaults.headers.common['Authorization'] = null
    // Or:
    // delete axios.defaults.headers.common['Authorization']
  }}>Log Out</Button>