将JWT令牌存储到浏览器中localStorage中,并且往页面请求头中添加token

将JWT令牌存储到浏览器中localStorage中

复制代码
localStorage.setItem('token', response.data.data)

其中response.data.data是后端返回的数据为jwt字符串

往页面请求头中添加token

在vue中的main.js添加如下再带,axios便会拦截所有请求并且如果localStorage有token则会添加到页面的请求头中

复制代码
axios.interceptors.request.use(
  // config:请求报文信息
  function (config) {
    // 在发送请求之前做些什么
    // 如果有token,就在请求头中添加token
    if (localStorage.getItem('token')) {
      config.headers.token = localStorage.getItem('token')
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)
相关推荐
尘中客2 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_2 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中3 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007473 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
前端大波3 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
cch89183 小时前
汇编与Java:底层与高层的编程对决
java·开发语言·汇编
荒川之神4 小时前
拉链表概念与基本设计
java·开发语言·数据库
Highcharts.js4 小时前
适合报表系统的可视化图表|Highcharts支持直接导出PNG和PDF
javascript·数据库·react.js·pdf
chushiyunen4 小时前
python中的@Property和@Setter
java·开发语言·python
ZC跨境爬虫4 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构