vue-cli项目中axios的配置文件

最新推荐文章于 2024-09-01 19:17:21 发布

sonicwater

最新推荐文章于 2024-09-01 19:17:21 发布

阅读量374

点赞数

分类专栏： Vue axios 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/sonicwater/article/details/103929729

版权

Vue 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

axios

5 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue项目中如何配置和使用Axios进行API请求，包括响应和请求拦截器的设置，以及如何处理401状态码进行身份验证，自动跳转登录页面。同时，展示了如何在请求头中加入token，确保每次请求的安全性。

摘要由CSDN通过智能技术生成

./src/api/index.js
首先引入axios，引入配置好的路由，并配置响应拦截器

import axios from "axios";
import router from "../router";
// http 响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response;
  },
  error => {
    if (error.response) {
	  switch (error.response.status) {
		case 401:
		  router.push({
			path:'./login'
		  })
	  }
	}
	return Promise.reject(error);
  }
)

状态码401是对身份的验证，如果验证失败，需要跳转到登陆页面。

配置请求拦截器

axios.interceptors.request.use(
  config => {
    if( localStorage.getItem('token') ){
	  config.headers.Authorization = localStorage.getItem('token')
	}
    return config;
  },
  error => {
    return Promise.reject(error);
  }
)

如果本地存储存在token（如果token存入了vuex的store就从store取），每请求前在参数的headers.Authorization中存入token。

写一个创建请求时的配置

let qs from 'qs';
let config = {
  baseURL: process.env.VUE_APP_BASEURL,
  method: "get",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  transformRequest: [
    function(data) {
      // 由于使用的form-data传数据所以要格式化
      data = qs.stringify(data);
      return data;
    }
  ]
};

process.env.VUE_APP_BASEURL是vue-cli自己手动配置的值。
transformRequest允许在向服务器发送前，修改请求数据，只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream。
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

写一个测试接口调用

//测试接口调用
export const getTestData = params => {
  return axios.post("getTestData", params, config).then(res => res.data);
};

接口调用可以全写在’./src/api/index.js’这个文件中，也可以独立出来。