vue封装axios自动带上token

最新推荐文章于 2025-03-11 22:41:03 发布

上架ipa

最新推荐文章于 2025-03-11 22:41:03 发布

阅读量2.6k

点赞数 1

分类专栏： H5开发移动开发

本文链接：https://blog.youkuaiyun.com/h5xiaoyu/article/details/113311775

版权

本文介绍如何在Vue项目中封装axios，以自动在每个请求中添加token和环境变量定义的URL前缀。通过设置.env文件和配置代理，实现开发和生产环境的接口地址自动切换。

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

在我们使用vue开发的时候，请求后台我们通常使用axios这些第三方库来实现，但是我们在使用的时候，遇到一个问题，我们每一个请求都需要带上token,这样就增加了我们的重复工作量。

所以，我们可以对axios做一个封装，让我们使用它的时候，自动带入token和url的前缀（url的前缀生产环境和开发环境可以不同）

好了，直接上代码：

import axios from 'axios'
import Vue from 'vue';
import qs from 'qs';
//import store from '@/store';
import { MessageBox, Message,Notification,Loading } from 'element-ui';
import router from '@/router/index.js';
//import store from '@/store'


const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 30000 // request timeout
})


// request interceptor
service.interceptors.request.use(
  config => {
	  
	//store.commit("app/SHOW_LOADING");//一个用vuex实现的全局变量，用来展示是否loadding中
	
	if(config.method === 'post') {
		
		
		if(config.isObj&&am