vue.js - Vuex：令牌不存储在本地存储中

Question

我使用 vuex 在 Vue App 中有这个商店：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    email: null,
    token: localStorage.getItem('token') || null,
    role: null
  },
  mutations: {
    saveToken (state, token) {
      state.token = token
    }
  },
  actions: {
    createToken (context, user) {
      axios.post('http://127.0.0.1:8001/api/user/login', {
        email: user.email,
        password: user.password
      }).then(response => {
        const token = response.data.token
        localStorage.setItem('token', token)
        context.commit('saveToken', token)
      })
    }
  },
  modules: {
  }
})

当我登录时，令牌状态已正确更改，但当我刷新页面时，状态再次为空。

Answer 1

首先需要设置axios headers的授权

  axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

以上是如果您使用的是承载身份验证。

其次，确保后端是否在登录时发送刷新令牌，因为您还需要将其保存在本地存储中。