Search⌘ K
Home
Courses
Jump Start with Vue 3

Example: Authorized Routes

Understand how to create protected routes in Vue 3 applications using Vue Router. Learn to build a mock authentication service, configure route guards to restrict access, and handle user login and redirection. This lesson helps you secure client-side routes by implementing beforeEnter guards and managing navigation based on authentication status.

We'll cover the following...

To put the use of Vue Router into practice, let’s look at something a lot of client-side apps typically need: protected routes. Let’s build a simple example that demonstrates how to configure routes with authentication checks that will redirect to a login form when a guest tries to access them.

To keep the example simple and focus on the routing aspects, we’re going to create a mock authentication service. In a real app, this would call out to our server or third-party authentication service.

Here’s our src/auth.js file:

Java
let loggedIn = false;
export default {
login(email, password) {
    return new Promise((resolve, reject) => {
    if (email === 'user@example.com' && password === 'password') {
      loggedIn = true;
      resolve();
    }   
    else {
      reject();
    }
  });
},
  logout() {
    loggedIn = false;
  },
  isAuthenticated() {
    return loggedIn;
  },
};

Code explanation

This authentication service provides a login() method that simply checks an email and ...