How to fix JSON parse error in Vuex with localStorage - json

Question

I have setup Vuex in Vue.js and using it to update the state. After building login functionality on it I am trying to store the token in localstorage but when I add localstorage to state it is throwing an error.
my current code:
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

Since you're receiving raw encoding and creating an object wrapper for it in this format:
{ access_token: 'eyJ0eX...' }
You shouldn't destructure it in the mutation payload. Pass the whole object to localStorage if you're going to use JSON.parse:
updateStorage(state, access_token) {
state.accessToken = access_token;
localStorage.setItem('accessToken', JSON.stringify(access_token));
},