How can I implement role-based authentication in Vue Router?

How can I implement role-based authentication in Vue Router?

To implement role-based authentication in Vue Router, you can use navigation guards to check user roles before accessing routes.

Can you show me an example of how to set up a route guard for admin users?

Sure! You can create a route guard like this:

const adminGuard = (to, from, next) => {
  const userRole = getUserRole(); // Function to get user role
  if (userRole === 'admin') {
    next(); // Allow access
  } else {
    next({ name: 'not-authorized' }); // Redirect to not authorized page
  }
};

Then, apply it to your route:

const routes = [
  { path: '/admin', component: AdminComponent, beforeEnter: adminGuard },
];

What if I want to restrict access to multiple roles?

You can modify the guard to check for multiple roles like this:

const roleGuard = (to, from, next) => {
  const userRole = getUserRole();
  const allowedRoles = ['admin', 'editor'];
  if (allowedRoles.includes(userRole)) {
    next();
  } else {
    next({ name: 'not-authorized' });
  }
};