Hello, I have implemented a setup using Vuex and Laravel sanctum for user authentication. Below is the code snippet from my Vuex file 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)
})
},
}
}
Although the authentication process works fine, the issue arises when the page is refreshed as the authentication status resets to false. Can someone guide me on how to retain the authentication status as true if the user is already authenticated?