I am facing an issue where the state gets cleared on refresh, even though the token, userid, user email, and expiration date are stored in local storage and cookies. I suspect there might be a problem with the store or something else needs to be done to retain the information.
Here is the logic on my login page for sending the information, fetching the token from the backend, and attempting to commit it to my mutation:
async submitForm() {
const response = await axios.post(
'http://localhost:3000/api/user/login',
{
email: this.email,
password: this.password,
}
);
const responseData = await response.data;
const expiresIn = +responseData.expiresIn * 5000;
const expirationDate = new Date().getTime() + expiresIn;
localStorage.setItem('token', responseData.token);
localStorage.setItem('userId', responseData.userId);
localStorage.setItem('email', responseData.email);
localStorage.setItem('tokenExpiration', expirationDate);
this.$cookies.set('token', responseData.token);
this.$cookies.set('userId', responseData.userId);
this.$cookies.set('email', responseData.email);
this.$cookies.set('tokenExpiration', expirationDate);
this.$store.commit('setUser', {
token: responseData.token,
userId: responseData.userId,
});
},
This is how my store information is set up:
Index.js
import mutations from './mutations.js';
import getters from './getters.js';
export default {
state() {
return {
userId: null,
token: null,
didAutoLogout: false,
};
},
mutations,
getters,
};
mutations.js
export default {
setUser(state, payload) {
state.token = payload.token;
state.userId = payload.userId;
state.didAutoLogout = false;
},
setAutoLogout(state) {
state.didAutoLogout = true;
},
};
getters.js
export default {
userId(state) {
return state.userId;
},
token(state) {
return state.token;
},
isAuthenticated(state) {
return !!state.token;
},
didAutoLogout(state) {
return state.didAutoLogout;
},
};
The isAuthenticated function is called in my default layout as shown below:
export default {
computed: {
isAuthenticated() {
return this.$store.getters.isAuthenticated;
},
},
};
I also attempted using Nuxt auth with cookie:
auth: {
strategies: {
cookie: {
token: {
property: 'token',
global: true,
},
},
},
},
and local:
auth: {
strategies: {
local: {
token: {
property: 'token',
global: true,
},
},
},
},