How can I implement authentication in a Vue 3 app using Vuex?

How can I implement authentication in a Vue 3 app using Vuex?

To implement authentication in a Vue 3 app using Vuex, you can follow these steps: 1. Set up Vuex store. 2. Create actions for login and logout. 3. Use mutations to update the state. 4. Store user data in local storage.

Can you show me a code example for the login action?

Sure! Here's a simple example of a login action in Vuex:

login({ commit }, userCredentials) {
  // Simulate an API call
  return new Promise((resolve, reject) => {
    if (userCredentials.username === 'admin' && userCredentials.password === 'password') {
      commit('SET_USER', userCredentials);
      resolve();
    } else {
      reject('Invalid credentials');
    }
  });
}

What about handling user sessions?

You can handle user sessions by storing the user token in local storage and checking its validity on app load. Use Vuex to manage the authentication state.

How do I protect routes in my Vue app?

To protect routes, you can use navigation guards in Vue Router. Check the authentication state before allowing access to certain routes.