如何使用 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));
},