VueJS 设置基本 URL 标头

Question

我正在开发一个基于令牌的身份验证系统。

我成功捕获并保存了idToken 中的store.js。

然后我创建一个getter 来返回这个idToken 值：

returnToken(state) {
  return state.idToken
}

到目前为止一切正常。我可以通过 vue 开发者工具在两个地方（state 和 getters）看到 idToken 的值。

然后在 ma​​in.js 我添加了一个计算属性：

export default {
  computed: {
    returnToken(){
      return this.$store.getters.idToken
    }
  }
}

最后我添加了

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

但 Authorization 标头在开发者工具网络中是 undefined。

我该如何解决这个问题以及如何检查它是否成功到达 main.js？

Answer 1

如果你有一个 getter 如下：

returnToken(state){
    return state.idToken;
}

然后在组件中，access the getter using:

export default {
    computed: {
        returnToken(){
            return this.$store.getters.returnToken; // was getters.idToken
                                    // ^^^^^^^^^^^ --- changed this part
        }
    }
}

OR，在组件中，access the state using：

export default {
    computed: {
        returnToken(){
            return this.$store.state.idToken;  // was getters.idToken
                            // ^^^^^ ------------ changed this part
        }
    }
}