axios统一添加header

本文详细介绍如何在项目中配置Axios并将其与Vue集成,包括设置超时时间、基础URL、请求拦截器以自动添加token到HTTP header,以及在main.js中引入并挂载到Vue原型上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 创建axios.js

import axios from 'axios';

// 这里自己获取token
let token = ...

// axios 配置
axios.defaults.timeout = 1 * 60 * 1000;
axios.defaults.baseURL = '/';

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (token) {  
      // 判断是否存在token,如果存在的话,则每个http header都加上token
      config.headers.Authorization = `Bearer ${token}`; // 根据实际情况自行修改
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);
export default axios;

2. main.js中引入

import http from "./axios";
Vue.prototype.$http = Vue.$http = http; // 根据实际情况自行修改
### 实现 Vue 项目中全局添加自定义 Header 参数 为了实现每次发起 HTTP 请求时自动携带特定头部信息,可以利用 `axios` 的拦截器功能来完成这一需求。具体来说,在创建 Axios 实例之后配置请求拦截器,这样可以在每一个发出的请求前动态地向其 headers 添加必要的字段。 对于需要加入到所有请求中的公共参数,可以通过扩展默认配置的方式处理;而对于那些仅限于某些类型的请求才需附加的数据,则建议单独设定或是在业务逻辑层面控制传递。 #### 创建并配置 Axios 实例 首先安装 axios 库(如果尚未安装),接着初始化一个带有预设选项的新实例: ```javascript // src/utils/axiosInstance.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL 地址 timeout: 5000 // 超时时间设置为 5 秒钟 }); ``` #### 配置请求拦截器 接下来就是重点部分——编写请求拦截器函数用于修改即将发送出去的请求对象。这里不仅能够方便地往 headers 加入认证令牌之类的信息[^2],还可以根据实际情况灵活调整其他属性: ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 将获取到的 token 放入 Authorization 字段下 } // 如果有更多固定的 header 或 query 参数要加在这里 Object.assign(config.headers, baseParams); return config; }, error => Promise.reject(error) ); ``` 上述代码片段展示了如何读取本地存储中的 token 并将其作为 Bearer Token 形式嵌入到每一次请求之中。同时引入了一个名为 `baseParams` 的模块,它可能包含了应用程序所需的额外静态参数[^3]。 #### 处理未授权访问的情况 考虑到安全性方面的要求,当检测不到有效的 session-token 时应阻止用户继续浏览受保护的内容,并重定向回登录界面等待重新验证身份[^5]: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !localStorage.token){ next({ path: '/login'}); }else{ next(); } }) ``` 这段脚本会在页面切换之前检查目标路径是否标记了 requiresAuth 属性以及是否存在合法的身份证明材料。一旦发现异常即刻终止导航流程并将用户导向登陆入口。 综上所述,通过以上几个步骤就可以实现在整个应用范围内一致性的管理 API 请求头信息的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值