How do I implement authentication in a Vue 3 app using Axios?

How do I implement authentication in a Vue 3 app using Axios?

To implement authentication in a Vue 3 app using Axios, you can follow these steps: 1. Set up your Vue 3 project. 2. Install Axios using npm. 3. Create a login form component. 4. Use Axios to send a POST request to your authentication API. 5. Store the received token in local storage. 6. Use navigation guards to protect routes.

Can you show me an example of the Axios POST request for login?

Sure! Here's a simple example:

axios.post('https://yourapi.com/login', {
  username: this.username,
  password: this.password
})
.then(response => {
  localStorage.setItem('token', response.data.token);
  this.$router.push('/dashboard');
})
.catch(error => {
  console.error('Login failed:', error);
});

How do I protect my routes after logging in?

You can use Vue Router's navigation guards. In your router configuration, add a beforeEach guard to check for the token:

router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token');
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login' });
  } else {
    next();
  }
});