为什么即使删除令牌后，axios 拦截器中仍存在授权令牌？

Question

我正在构建一个项目，我将我的身份验证令牌存储在本地存储中。

这是我的 index.js 代码：

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')
);

登录后，login button 更改为 logout button，单击注销按钮后，localstorage 令牌被删除

代码如下：

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

当我在 devtools 的应用程序选项卡中检查时单击注销按钮后，我可以看到令牌已被删除但是当我在注销后发出一些其他请求时，我可以看到令牌仍然存在于请求中受到 axios 拦截器的安慰。

当我重新加载页面时，令牌从 axios 拦截器中消失，但在注销后不会自动消失。

请指导我的逻辑有什么问题，如果需要更多信息，请告诉我。

Answer 1

令牌保留在拦截器中，因为在 onClick 事件中，您只是从存储中移除令牌，而不是从拦截器本身移除令牌。

要删除它，您必须更改或删除 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>

为什么即使删除令牌后，axios 拦截器中仍存在授权令牌？

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

reactjs

axios