vue-resource headers如何动态地设置

Question

Vue.http.options.root = 'http://127.0.0.1:5000/api/v1';
Vue.http.options.headers={};
Vue.http.options.headers.Authorization='token ' + (localStorage['token'] || '')

我希望Authorization是一个方法,每次读取都是调用这个方法,因为目前的写法只会在网页第一次访问时读取localStorage,但是我有其他操作会修改localStorage['token']

还有一个问题(可不回答)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import iView from 'iView'
import 'iview/dist/styles/iview.css'
import routes from './router.js';
import VueResource from 'vue-resource'

Vue.use(VueRouter);
Vue.use(iView);
Vue.use(VueResource);

const router = new VueRouter({
  mode: 'history',
  routes
})
Vue.http.options.root = 'http://127.0.0.1:5000/api/v1';
Vue.http.options.headers={};
Vue.http.options.headers.Authorization='token ' + (localStorage['token'] || '')

new Vue({
  router,
  el: '#app',
 
  render: h => h(App),
})

这是我的main.js,我尝试在下面的Vue实例中配置http,但是总是无效,目前只能在Vue实例前手动地一个个设置,有没有人遇到过这样的问题?

Answer 1

Vue.http.headers.common['Authorization'] = 'xxx'
// 也可以在拦截器里动态设置
Vue.http.interceptors.push((request, next) => {
    if () {
        request.headers.set('Authorization', 'xxxx')
    }    
})