How do I implement routing guards and redirects in Vue 3?

How do I implement routing guards and redirects in Vue 3?

In Vue 3, you can use the beforeEnter route guard to implement routing guards. You can also use the router.beforeEach method for global guards.

Can you give me an example of a routing guard?

Sure! Here's a simple example:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: (to, from, next) => {
        const isAuthenticated = false; // Replace with your auth logic
        if (isAuthenticated) {
          next();
        } else {
          next('/login'); // Redirect to login if not authenticated
        }
      }
    }
  ]
});

What if I want to redirect users based on their roles?

You can modify the beforeEnter guard to check the user's role. For example:

beforeEnter: (to, from, next) => {
  const userRole = 'admin'; // Replace with your role logic
  if (userRole === 'admin') {
    next(); // Allow access
  } else {
    next('/not-authorized'); // Redirect if not authorized
  }
}

Are there any best practices for using routing guards?

Yes! Keep your guards simple, avoid heavy logic, and consider using a centralized auth service to manage user states.