vue+vue-resource设置请求头(带上token) 前言

时间:2024-03-29 06:57:05

 

 有这样的一个需求,后台服务器要求把token放在请求头里面

  嗯一般是通过data里面通过参数带过去的

第一种方法

  全局改变:

  Vue.http.headers.common['token'] = store.state.token;

  之前是吧token刚在data里面的

  是我封装的一个get 请求,亲测有用。现在我们项目就是用的这一种

      vue+vue-resource设置请求头(带上token) 前言

  然后放一个请求成功的实例

  首先会先发一个 OPTIONS 预请求

  vue+vue-resource设置请求头(带上token) 前言

  然后发出正式请求

  vue+vue-resource设置请求头(带上token) 前言

 

第二种方法:

  不能局限于一种方法嘛!

  第二种方法是:在Vue实例中设置

vue+vue-resource设置请求头(带上token) 前言

var vm = new Vue({
  el:'#app',
  data:{
   showList: true,
   title: null
  },
  http: {
    root: '/',
    headers: {
      token: token
    }
  }
})

vue+vue-resource设置请求头(带上token) 前言

 

第三种方法:在拦截器中设置  vue interceptors 设置请求头

vue+vue-resource设置请求头(带上token) 前言

Vue.http.interceptors.push((request, next) => {
    request.headers.set('token', token); //setting request.headers
    next((response) => {
      return response
   })
})

vue+vue-resource设置请求头(带上token) 前言

 

还可以这样

  在在main.js添加过滤器

vue+vue-resource设置请求头(带上token) 前言

Vue.http.interceptors.push((request,next)=>{
 //request.credentials = true; // 接口每次请求会跨域携带cookie
 //request.method= 'POST'; // 请求方式(get,post)
 //request.headers.set('token','111') // 请求headers携带参数
 
 next(function(response){
  return response;
 
 });
})

vue+vue-resource设置请求头(带上token) 前言

 

Fannie总结

  后面的方法要自己去实践哦,我用的是第一种。

  然后再次提醒一下,你们自家的服务器要支持这样传token哦~

  不然会报个错的,像下面这样

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

   拜拜了。