如何使用 localStorage 修复 Vuex 中的 JSON 解析错误

Question

我在 Vue.js 中设置了 Vuex 并使用它来更新状态。在其上构建登录功能后，我试图将令牌存储在 localstorage 中，但是当我添加 localstorage 以声明它抛出错误时。

我当前的代码：

import Vue from 'vue';
import Vuex from 'vuex';
import { getAPI } from '@/axios';

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    accessToken: JSON.parse(localStorage.getItem('accessToken')) || null,
    APIData: '',
  },
  mutations: {
    // eslint-disable-next-line camelcase
    updateStorage(state, { access_token }) {
      // eslint-disable-next-line camelcase
      state.accessToken = access_token;
      localStorage.setItem('accessToken', JSON.stringify(access_token));
      // axios.defaults.headers.common.Authorization = `Bearer ${access_token.access_token}`;
      // sessionStorage.setItem('accessToken', access_token);
    },
    destroyToken(state) {
      state.accessToken = null;
    },
  },
  getters: {
    loggedIn(state) {
      return state.accessToken != null;
    },
  },
  actions: {
    userLogin(context, usercredentials) {
      return new Promise((resolve, reject) => {
        getAPI.post('/login', {
          email: usercredentials.email,
          password: usercredentials.password,
        })
          .then((response) => {
            context.commit('updateStorage', { access_token: response.data.access_token });
            resolve();
            console.log(response.data.access_token);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    userLogout(context) {
      if (context.getters.loggedIn) {
        context.commit('destroyToken');
      }
    },
  },
});

Answer 1

由于您正在接收原始编码并以此格式为其创建对象包装器：

{ access_token: 'eyJ0eX...' }

你不应该在变异有效负载中解构它。如果您要使用 JSON.parse:

，请将整个对象传递给 localStorage

updateStorage(state, access_token) {
  state.accessToken = access_token;
  localStorage.setItem('accessToken', JSON.stringify(access_token));
},

如何使用 localStorage 修复 Vuex 中的 JSON 解析错误

How to fix JSON parse error in Vuex with localStorage

json

local-storage

vue.js

vue-component

vuex