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

Posted 2023-02-22

【中文标题】如何使用 localStorage 修复 Vuex 中的 JSON 解析错误

【英文标题】：How to fix JSON parse error in Vuex with localStorage

【发布时间】：2021-06-02 04:00:20

【问题描述】：

我在 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');
      
    ,
  ,
);

【问题讨论】：

抛出了什么错误

@depperm Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

该值不是有效的 JSON。有什么价值？ console.log(localStorage.getItem('accessToken'))?

@shob 我从它获得令牌值。

显然是无效的 JSON。这就是错误的含义

【参考方案1】：

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

 access_token: 'eyJ0eX...' 

您不应该在突变有效负载中对​​其进行解构。如果您要使用JSON.parse，则将整个对象传递给localStorage：

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

【讨论】：

所以这应该是怎样的？ 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', access_token); ,

仔细看我的回答，我没有这样做：updateStorage(state, access_token )。你删除了JSON.stringify？我不明白，你所做的与我建议的完全不同......