VueJS 设置基础 URL headers

Question

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

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

然后我创建一个 getter 到 return 这个 idToken 值：

returnToken(state) {
  return state.idToken
}

至此一切都还好。我可以通过 vue 开发人员工具在两个地方（state 和 getters）看到 idToken 值。

然后在 main.js 我添加了一个计算属性:

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

最后我添加了

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

但是 Authorization header 在开发者工具网络中 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
        }
    }
}

或，在组件中，access the state using:

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

VueJS 设置基础 URL headers

VueJS set base URL headers

vue.js

vuejs2

axios

vuex