axios请求前把token值加到请求头上

最新推荐文章于 2024-06-30 15:30:45 发布

原创最新推荐文章于 2024-06-30 15:30:45 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #typescript

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在使用Axios发起HTTP请求时自动添加Token到请求头的方法，并讨论了解决在特定接口调用时Token缺失的问题。通过二次添加Token确保权限接口能够正确验证。

axios请求前，登录成功，token值存在

if (localStorage.getItem('token')) {
  axios.interceptors.request.use((config) => {
    config.headers.post['Content-Type'] = 'application/json';
    config.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    return config;
  });
}

这样就在每一个axios请求头header上加上了token值，但是后续开发中出现了一个问题：发现在调用权限接口时未把token加到权限接口的header上，原因大概是因为权限接口未在token值存在时便已经调用此接口，最终解决使用的解决方式是在此接口调用时把添加token的操作再执行一遍便解决了。后续会优化下这个方法，毕竟代码重复了嘛

   // 权限控制
  getAuthorityControl: async () => {
    axios.interceptors.request.use((config) => {
      config.headers.post['Content-Type'] = 'application/json';
      config.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
      return config;
    });
    const res = await axios.get(`${URL}/api/Menu`);
    return res.data;
  },