What are some advanced examples of route guards in Vue 3?

What are some advanced examples of route guards in Vue 3?

In Vue 3, route guards can be used to control access to routes. Advanced examples include using asynchronous checks, such as verifying user roles or permissions before allowing access.

Can you show me an example of a route guard that checks user roles?

Sure! You can create a route guard like this:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        const userRole = getUserRole(); // Assume this function fetches the user role
        if (userRole === 'admin') {
          next(); // Allow access
        } else {
          next({ path: '/unauthorized' }); // Redirect to unauthorized page
        }
      }
    }
  ]
});

This checks if the user has the 'admin' role before granting access.

What if I want to implement a loading state while checking the role?

You can manage a loading state by using a reactive variable. Here's an example:

const isLoading = ref(false);

const router = createRouter({
  routes: [
    {
      path: '/admin',
      beforeEnter: async (to, from, next) => {
        isLoading.value = true;
        const userRole = await getUserRoleAsync(); // Fetch role asynchronously
        isLoading.value = false;
        if (userRole === 'admin') {
          next();
        } else {
          next({ path: '/unauthorized' });
        }
      }
    }
  ]
});

This way, you can show a loading spinner while the role is being checked.