vue+axios 全局添加请求头和参数操作

走登录的接口都会返回一个 token 值, 然后存起来方便之后调接口的时候给后台传过去, 传给后台的方式有两种:(具体使用哪种需要和后台商量)

1, 放在请求头中

2, 放在接口的参数中

1, 放在请求头中

下面代码是从本地 cookie 中拿 token

vueCookie: 一个用于处理浏览器 cookies 的简单 vue.js 插件. https://www.npmjs.com/package/vue-cookies// 在封装 axios 的文件中添加拦截器

// 添加请求拦截器, 在请求头中加 token

service.interceptors.request.use(

config=>{

// 判断本地的 cookie 中是否有 token

if(VueCookie.isKey('token')){

config.headers.Authorization=VueCookie.get('token')

}else{

// 跳转到登录页面 (这里使用 router, 是因为路由文件引入到了此文件里)

router.push('/login')

}

returnconfig

},

error=>{

returnPromise.reject(error)

})

这个时候虽然在请求头中放了 token, 但是后台并拿不到 token 的值, 我们需要在创建 axios 对象的时候允许请求携带 cokie, 也可以加到 main.JS 全局里面.// 放在请求文件中

constservice=axios.create({

baseURL:"http://XXXXXXXXX:XXXX",

timeout:10000,

withCredentials:true// 允许携带 cookie

});

// 放在全局 main.JS 中

importaxiosfrom"axios";

axios.defaults.withCredentials=true;// 允许携带 cookie

2, 放在参数中

以下代码是从本地存储 localStorage 中拿 token// 添加请求拦截器, 在参数中加 token

service.interceptors.request.use(

config=>{

// 将 token 添加到每一个接口的参数中

// 判断请求的类型: 如果是 post 请求就把默认参数拼到 data 里面; 如果是 get 请求就拼到 params 里面

consttoken=localStorage.getItem('ISTOKEN')

if(localStorage.getItem('ISTOKEN')){

// 注意: config.method 的判断值必须是小写的 post 和 get

if(config.method==='post'){

config.data={

api_token:token,

...config.data

}

}elseif(config.method==='get'){

config.params={

api_token:token,

...config.params

}

}

}else{

// 跳转到登录页面 (这里使用 router, 是因为路由文件引入到了此文件里)

router.push('/login')

}

returnconfig

},

error=>{

returnPromise.reject(error)

})

补充知识: Vue,POST 请求头'Content-Type':'application/json;',data 上传方法

如下所示:

transformRequest 方法说明 axios 中文文档 https://www.kancloud.cn/yunye/axios/234845

来源: https://www.jb51.net/article/191654.htm