How do I implement logout functionality in Vue Router?

How do I implement logout functionality in Vue Router?

To implement logout functionality in Vue Router, you can create a method that clears the user's session and redirects them to the login page.

Can you show me a code example for that?

Sure! You can create a method like this:

methods: {
  logout() {
    // Clear user session
    this.$store.dispatch('logout');
    // Redirect to login page
    this.$router.push('/login');
  }
}

What if I want to protect certain routes from being accessed when logged out?

You can use navigation guards in Vue Router to protect routes. For example:

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