Vuex persist authenticated status

Question

I'm using Vuex and Laravel sanctum to authenticate users. The following is my Vuex auth.js

import axios from 'axios'

export default {

    namespaced: true,

    state:{
        authenticated: false,
        user: null
    },

    getters:{
        authenticated (state) {
            return state.authenticated
        },

         user (state) {
            return state.user
        }
    },

    mutations:{
        SET_AUTHENTICATED(state, value){
            state.authenticated = value
        },

        SET_USER(state, data){
            state.user = data
        }
     },

    actions:{
        async login ({commit}, credentials){
         await axios.get('/sanctum/csrf-cookie')
          await axios.post('/api/login', credentials).then(response => {
                commit('SET_AUTHENTICATED', true)
                commit('SET_USER', response.data)
            }).catch(() => {
                commit('SET_AUTHENTICATED', false)
                commit('SET_USER', null)
            })

        },


    }

}

The authentication is working but everytime I refresh the page the authentication status is defaulted back to false. How do I ensure that if the user is authenticated the authentication status remains true?

score 2 · Answer 1 · answered Jan 20 '21 at 12:43

2

There are two possible options to persist data: you could use cookies or local storage. Both options are frequently used, for example by Nuxt Auth.

An easy option to persist the store would be to use vuex-persist. You can find the getting started guide here.

answered Jan 20 '21 at 12:43

EricHier

446
3
10

I used Vuex-persist with Laravel Sanctum to persist auth, but when the session expire, Vuex-persist still keeps my store as authenticated do you have a solution about that ?? – Solidus Jan 13 '22 at 15:37

score 1 · Accepted Answer · answered Jan 20 '21 at 12:47

Assuming you're getting back a token from your API, you could store this in the local storage.

state: {
    authenticated: false,
    user: null,
    token: localStorage.getItem('token') || '',
},
actions:{
    await axios.post('/api/login', credentials).then(response => {
        const token = response.data.token
        localStorage.setItem('token', token)
    })
}

You could handle an expired token via Axios interceptors:

created () {
    this.$axios.interceptors.response.use(undefined, function (err) {
        return new Promise(function (resolve, reject) {
        if (err.status === 401) {
          this.$store.dispatch(logout)
        }
        throw err;
      });
    });
}

Vuex logout action

logout({commit}){
  return new Promise((resolve, reject) => {
    commit('logout')
    localStorage.removeItem('token')
    delete axios.defaults.headers.common['Authorization']
    resolve()
  })
}

score 0 · Answer 3 · answered Jan 22 '21 at 08:04

0

@studio-pj. I don't think it is safe to store a token in LocalStorage because it are user credentials. Everywhere i read about LocalStorage is that it shouldn't be used for login credentials and other security sensitive data.

answered Jan 22 '21 at 08:04

Bas van Ingen

1
3

Vuex persist authenticated status

3 Answers3