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