Vue.js Vuex Axios令牌未定义

我正在尝试使用Vuejs和Django执行用户登录。我使用vuex和django restframework作为组件。当我在Vuex store中使用用户登录表单时，django会为用户创建令牌。但是，vue js不会检测生成的用户令牌。令牌返回为未定义

My store.js代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        status: '',
        token: localStorage.getItem('token') || '',
        user : {}
    },
    mutations: {
        auth_request(state){
            state.status = 'loading'
        },
        auth_success(state, token, user){
            state.status = 'success'
            state.token = token
            state.user = user
        },
        auth_error(state){
            state.status = 'error'
        },
        logout(state){
            state.status = ''
            state.token = ''
        },
    },
    actions: {
        login({commit}, user){
            return new Promise((resolve, reject) => {
                commit('auth_request')
                axios({url: 'http://localhost:8001/api/v1/token/create', data: user, method: 'POST' })
                .then(resp => {
                    const token = resp.data.token
                    const user = resp.data.user
                    localStorage.setItem('token', token)
                    // Add the following line:
                    axios.defaults.headers.common['Authorization'] = 'Bearer ${token}'
                    commit('auth_success', token, user)
                    resolve(resp)
                })
                .catch(err => {
                    commit('auth_error')
                    localStorage.removeItem('token')
                    reject(err)
                })
            })
        },
        register({commit}, user){
            return new Promise((resolve, reject) => {
                commit('auth_request')
                axios({url: 'http://localhost:8001/api/v1/users/create', data: user, method: 'POST' })
                .then(resp => {
                    const token = resp.data.token
                    const user = resp.data.user
                    localStorage.setItem('token', token)
                    // Add the following line:
                    axios.defaults.headers.common['Authorization'] = 'Bearer ${token}'
                    commit('auth_success', token, user)
                    resolve(resp)
                })
                .catch(err => {
                    commit('auth_error', err)
                    localStorage.removeItem('token')
                    reject(err)
                })
            })
        },
        logout({commit}){
            return new Promise((resolve, reject) => {
                commit('logout')
                localStorage.removeItem('token')
                delete axios.defaults.headers.common['Authorization']
                resolve()
            })
        }
    },
    getters : {
      isLoggedIn: state => !!state.token,
      authStatus: state => state.status,
    }
})

Main.js

...
import store from './store';
import Axios from 'axios';

Vue.prototype.$http = Axios;
const token = localStorage.getItem('token')
if (token) {
  Vue.prototype.$http.defaults.headers.common['Authorization'] = 'Bearer ' + token
}
...

登录页面

...
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login: function() {
      let username = this.username
      let password = this.password
      this.$store.dispatch('login', { username, password })
      .then(() => this.$router.push('/'))
      .catch(err => console.log(err))
    }
  }
...

---

main.js在store.js之前运行。只有在调用store.js中的登录操作后，才能生成令牌。在这之后，不会再次触发

localStorage.getItem（）

方法，因此令牌在那里保持未定义状态

---

获取令牌的最简单方法是将另一个条目放入令牌的getters中，然后使用mapGetters从您想要的任何组件获取它。

如果其他任何人遇到它：

我打电话给一些私人助手：

function setDefaultAuthHeaders(state) {
    axios.defaults.headers.common.Authorization = state.currentToken
       ? `Bearer ${state.currentToken.token}`
       : ''
}

function saveState(key, state) {
    window.localStorage.setItem(key, JSON.stringify(state))
}

然后，在我的变异中，我有一个名字叫它：

export const mutations = {
    SET_TOKEN(state, newToken) {
        state.currentToken = newToken
        saveState('currentToken', newToken)
        setDefaultAuthHeaders(state)
    },
}

---

“Vue未检测到生成的用户令牌”是什么意思？您是否确认登录响应中包含令牌？登录后，您在什么时候读取Vue中的令牌？您好，您知道了吗？有相同的问题。我有相同的问题，但不是针对令牌，而是针对用户。