Vuex：令牌不存储在本地存储中答案

【问题标题】：Vuex : token doesn't stored in local storageVuex：令牌不存储在本地存储中
【发布时间】：2021-04-12 10:11:31
【问题描述】：

我在使用 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: {
  }
})

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

【问题讨论】：

检查您的开发工具，看看您是否真的有任何成功的令牌集：chrome dev tools > application > storage > local storage 应该可以帮助您查看令牌是否在这里。从来没有尝试在状态中拥有 dynamic 的东西，也许它不可行或者它需要一个 window 前缀。如果它在该州不起作用，吸气剂可以提供帮助。
我正在使用vue开发工具，我会尝试getter
我建议您在继续之前检查您是否有本地存储令牌。
我检查它重新启动 chrome 保存本地存储

标签： vue.js local-storage state vuex

【解决方案1】：

首先需要设置axios headers的授权

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

以上是如果你使用的是承载认证。

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

【讨论】：