axios拦截器携带token_1

　　目前在研究一个数据管理平台的前后端分离项目，使用axios拦截器获取用户登录后存储在localsession的token值，结果发现在浏览器的network请求标头中并没有token的信息。

　　最初的代码是这样子的：

复制代码
// 设置一个请求的拦截器，来设置token
axios.interceptors.request.use(
  config => {
    // 获取token，sessionStorage
    console.log(window.sessionStorage.getItem('token'))
    const tokenStr = window.sessionStorage.getItem('token')
    if (tokenStr) {
      config.headers.token = tokenStr
    }
    return config
  }
)
复制代码

　　结果发现：

 

 

　　查看Network，发现POST请求虽然成功了，但是并没有包含token的内容：

 

 

 　　说明const tokenStr = window.sessionStorage.getItem('token')并没有拿到token。

 　　如果这个时候刷新一下页面，重新跳转到login页面，在进行登录的话，就能拿到token的数据了。

 

 

 　　如果这个时候刷新一下页面，重新跳转到login页面，在进行登录的话，就能拿到token的数据了。同时network也包含了token的值：

 

 

 　　查阅了相关的资料，这个帖子似乎解决了这个问题（axios全局设置请求头token必须刷新一次才生效_我以为我可以的的博客-CSDN博客），但是自己测试了一下，貌似不行。

　　另外还有一篇帖子（重读vue电商网站28之通过axios请求拦截器添加 token - 前端导师歌谣 - 博客园 (cnblogs.com)），这个帖子说：在登录期间，服务器是不会颁发令牌(token)。如果登录之后，调用其它 api 接口的话，就会颁发相应的token令牌。

　　我理解的就是应该不影响，接着往下做的时候再来看看这个问题到底影响不影响整体的项目了。

 

posted @   DQ_Skinner的博客  阅读(518)  评论(0)  编辑  收藏  举报
相关博文：
·  关于gnome-control-center的问题解决
·  ubuntu22.04 挂载NAS硬盘
·  axios请求拦在器添加token（请求头添加token）保证有权访问请求数据~~
·  前端学习（2708）：重读vue电商网站28之通过axios请求拦截器添加 token
·  前端学习（2708）：重读vue电商网站28之通过axios请求拦截器添加 token
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手