axios 登录后设置header,vue+axios 全局添加请求头和参数操作

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 全局里面.// 放在请求文件中

constservi