axios拦截器:每次请求自动带上 token

Step 1:创建Axios实例并添加拦截器

在你的Vue项目中,一般我们会先导入axios,然后创建一个axios实例。这样做是为了方便统一管理和配置。

复制代码
import axios from 'axios'; // 引入axios

// 创建一个axios实例
const service = axios.create();

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做点事情
    let token = window.sessionStorage.getItem('token'); // 从sessionStorage获取Token
    if (token) { // 如果Token存在
      config.headers.Authorization = `Bearer ${token}`; // 将Token添加到请求头中,这里假设Token的格式是Bearer + Token值
    }
    return config; // 返回配置对象,继续发送请求
  },
  error => {
    // 对请求错误做点事情
    return Promise.reject(error);
  }
);

上面的代码做了什么呢?

  1. 我们创建了一个axios实例service,相当于有了一个专属邮差。

  2. 给这个邮差设置了规则:每次出门送信前,先检查一下有没有会员卡(Token)。

  3. 如果找到了会员卡(从sessionStorage中获取Token),就把会员卡号(Token值)写在信封上(添加到请求头Authorization字段)。

  4. 即使遇到请求错误,也会及时通知我们。

Step 2:全局使用带有拦截器的Axios实例

为了让Vue组件中的所有请求都能自动带上Token,我们将这个设置了拦截器的axios实例挂载到Vue的原型上:

复制代码
// 将axios实例绑定到Vue原型上,这样在所有Vue组件中都可以通过this.$http访问到
Vue.prototype.$http = service;

现在,每当在Vue组件中发起请求时,只需要调用this.http.get、this.http.post等方法,请求头就会自动带上从sessionStorage获取到的Token了。

相关推荐
江号软件分享8 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享9 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海13 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子23 分钟前
深入理解TCP协议
前端·javascript·面试
万少24 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲39 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css