How to stay logged in even after page refresh with vuex ?

Question

In order to login, I'll call a third-party API which will provide me the access token.

this is my store.js code which contains vuex

/* eslint-disable */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    strict: true,
    state: {
        token: null,
        isUserLoggedIn: false,
        userEmailAddress: null
    },
    mutations: {
        setToken (state, token) {
            state.token = token
            if (token) {
                state.isUserLoggedIn = true
            } else {
                state.isUserLoggedIn = false
                this.$router.push('login')
            }
        },
        setEmailAddress (state, emailAddress) {
            state.userEmailAddress = emailAddress
        }
    },
    actions: {
        setToken ({commit}, token) {
            commit('setToken', token)
        },
        setEmailAddress ({commit}, emailAddress) {
            commit('setEmailAddress', emailAddress)
        }
    }
})

Because I am not using passport, how can I make the user stay logged in even after they refresh the page ?

Answer 1

You can store the token in the localStorage ie localStorage.setItem("token", token) . When your app loads, you check if the token is present using localStorage.getItem("token") and probably also check for it's validity.

EDIT : There is actually quite nice tutorial how to achieve this in detail using the technique I mentioned: https://medium.com/front-end-hacking/persisting-user-authentication-with-vuex-in-vue-b1514d5d3278