[Vuejs]-How to auth the user in vue 3?

by

0👍

✅

The issue, I believe, is that the authentication state is not persistent. That means, that the data is gone if you redirect (using a manual url change) or refresh.

You can add persistence by

const state = {
  authenticated: localStorage.getItem('authenticated')==='true'; // get authentication from local storage
}
const store = createStore({
  state: state,
  mutations: {
    setAuthenticated(state, payload) {
      state.authenticated = payload;
      localStorage.setItem('authenticated', payload); // sill store 'true' in local storage
    }
  }
})

This will store the authenticated state in your localStorage. It populates the store state.authenticated value on instantiation, and updates on change.

There’s some other considerations, such as redirecting

    const authUser = () => {
      axios.get('/api/user').then(response => {
        store.commit('setAuthenticated',true);
        store.commit('setUser', response.data);
        router.push('/'); // <= will redirect after the values are set
      })
    }

Leave a comment