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

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

To implement authentication in a Vue.js app using Axios, you can follow these steps: 1. Set up your Vue.js project. 2. Install Axios using npm. 3. Create a login form and handle user input. 4. Use Axios to send a POST request to your authentication API. 5. Store the received token in local storage. 6. Use the token for subsequent requests.

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

Sure! Here's an example of an Axios POST request for login:

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

How do I protect routes in my Vue.js app after authentication?

You can protect routes in Vue.js by using navigation guards. In your router configuration, you can check if the user is authenticated before allowing access to certain routes. Here's an example:

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