vue配置 axios封装拦截器 token请求头

最新推荐文章于 2022-01-19 16:33:49 发布

qq614756883

最新推荐文章于 2022-01-19 16:33:49 发布

阅读量555

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45938332/article/details/111648613

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了在Vue项目中如何配置axios实例，包括设置baseUrl、超时时间和默认请求头。同时，文章演示了如何使用axios的请求拦截器来处理token验证，当token存在时添加到请求头，不存在则打印提示。响应拦截器则用于统一处理返回的数据。示例代码展示了在main.js中全局挂载axios以及在页面中调用API的例子。

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

import axios from 'axios';
import Vue from 'vue';

const serve = axios.create({
	baseUrl:'/api',
	timeout:5000
})
serve.defaults.headers.post['Content-Type']='application/json';
serve.interceptors.request.use(function (config) {
	var token = sessionStorage.getItem('setMuToken')
	if(token){
		config.headers['token']= token;  
        return config;
	}else{
		console.log('token为空')
	}
}, 
error => {
    return Promise.reject(error);
});
serve.interceptors.response.use(response => {
	return response.data;
}, 
error => {
	return Promise.reject(error)
	// if(error.status==404){
	// 	console.log('请求超时')
	// }
})

export default serve;

mian.js
配置

//引入注册
import http from './components/server/index';
Vue.prototype.$http=http;

页面使用

            subAddRole(){
                 const self = this;
                 this.addRoleState=true
                     self.$http({
                        method:'post',
                        url:'/api/admin/addPerms',
                        data:{
                            permsName:self.addMenu.permsName,
                            permsSign:self.addMenu.permsSign,
                            url:self.addMenu.url,
                            icon:self.addMenu.icon,
                            parentId:self.addMenu.parentId,
                            type:1
                        }
                    }).then(res=>{console.log(res)}