Question

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

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

main.js

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

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

Answer 1

您可以在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

Answer 2

@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})

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

2 个答案: