VueJS Axios 将 Id 令牌传递给全局标头答案

【问题标题】：VueJS Axios pass Id token to a global headerVueJS Axios 将 Id 令牌传递给全局标头
【发布时间】：2018-03-08 04:57:43
【问题描述】：

我获取了后端响应令牌并将其作为状态存储在 store.js 中。如何将该令牌值传递给main.js？我确实想将它附加到授权标头。这是我的代码。 store.js

state:{
idToken:"a sample id token"
  }

main.js

axios.defaults.headers.common['Authorization']=

如何将该令牌值传递给 Authorization 标头。谢谢。

【问题讨论】：

标签： vue.js vuejs2 axios

【解决方案1】：

@Shubham Patel 你应该注意 returnToken 的变化。然后，在观察者中重置听者。令牌刷新也应该使用突变进行。可能是这样的：

Main.js：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'returnToken'
    ])
  },
  watch: {
    returnToken(newToken) {
      this.$axios.defaults.headers.common['Authorization'] = newToken
    }
  }
}

Store.js：

export default new Vuex.Store({
  state: {
    idToken:"a sample id token"
  },
  getters: {
    returnToken: state => {
      return state.idToken
    }
  },
  mutations: {
    updateToken(state, {token}) {
      state.idToken = token
    }
  }
})

然后再来点别的：

let token = await loadToken()
store.commit('updateToken', {token})

【讨论】：

授权标头未定义。有没有办法检查它是否成功传递到主 .js 页面。谢谢！ =)
@Pathum Samarathna 我认为在任何令牌突变提交之前可能会调用一些请求。您可以通过 vuex 选项卡中的 vue-devtools 检查状态。也许急切的开始会更好。用 if 标志包装所有根模板，并在 created-hook 中检索您的令牌。释放回调中的 if 标志。
在 vue-tools getter -> returnToken getter 成功获取 idToken 值。所以很明显 getter 可以正常工作。有什么方法可以查看该令牌是否成功进入 main.js（如 console.log 之类的东西）
@Pathum Samaraathna 或许你可以在Vue实例中映射getter并在页面上打印出来。
我是初级开发人员，我不知道该怎么做。你能否演示一下如何做到这一点。谢谢你。 =)

【解决方案2】：

您可以在 Vuex 中编写一个 getter，它将返回您当前的身份验证令牌。

const store = new Vuex.Store({
state: {
   idToken:"a sample id token"
 },
 getters: {
    returnToken: state => {
      return state.idToken
    }
  }
})

然后使用导入getter

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'returnToken'
    ])
  }
}

然后写

axios.defaults.headers.common['Authorization']=this.returnToken()

Reference

【讨论】：

当我尝试 this.idTokenPass() 时出现错误“TypeError: this.idTokenPass is not a function” 然后我删除括号并尝试然后控制台中没有错误但授权标头未定义。这可能是我在 main.js 中而不是在 vue 组件中这样做的原因吗？