Navigation guards (beforeEach, beforeEnter) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a global navigation guard that runs before each route change.

Vue

router.[1]((to, from, next) => {
  console.log('Navigation started');
  next();
});

Drag options to blanks, or click blank then click option'

AonReady

BbeforeEnter

CafterEach

DbeforeEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using beforeEnter instead of beforeEach for global guards

Using afterEach which runs after navigation

Using onReady which is unrelated

The beforeEach method adds a global guard that runs before every route change.

2fill in blank

medium

Complete the code to add a route-specific guard that runs before entering the '/dashboard' route.

Vue

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    [1]: (to, from, next) => {
      if (isLoggedIn()) next();
      else next('/login');
    }
  }
];

Drag options to blanks, or click blank then click option'

AbeforeEnter

BbeforeEach

CafterEnter

DbeforeRouteEnter

Attempts:

3 left

💡 Hint

Common Mistakes

Using beforeEach inside route config (only global)

Using afterEnter which does not exist

Using beforeRouteEnter which is a component guard

The beforeEnter guard runs only before entering this specific route.

3fill in blank

hard

Fix the error in the global guard code to correctly call the next function.

Vue

router.beforeEach((to, from, [1]) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

Drag options to blanks, or click blank then click option'

Anext

Bcontinue

Cproceed

Dgo

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names like go or proceed

Not calling next at all causing navigation to hang

The next function must be called to resolve the navigation guard.

4fill in blank

hard

Fill both blanks to create a global guard that blocks navigation to '/admin' if the user is not an admin.

Vue

router.[1]((to, from, next) => {
  if (to.path === '/admin' && !userIsAdmin()) {
    next({ path: [2] });
  } else {
    next();
  }
});

Drag options to blanks, or click blank then click option'

AbeforeEach

BafterEach

C/login

D/home

Attempts:

3 left

💡 Hint

Common Mistakes

Using afterEach which runs after navigation

Redirecting to wrong path like '/home'

Use beforeEach for global guard and redirect to /login if not admin.

5fill in blank

hard

Fill all three blanks to create a route with a beforeEnter guard that checks if the user is logged in and redirects to '/login' if not.

Vue

const routes = [
  {
    path: '/profile',
    component: Profile,
    [1]: (to, from, next) => {
      if (![2]()) {
        next({ path: [3] });
      } else {
        next();
      }
    }
  }
];

Drag options to blanks, or click blank then click option'

AbeforeEnter

BisLoggedIn

C'/login'

DbeforeEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using beforeEach inside route config

Not calling next properly

Redirecting to wrong path or missing quotes

The beforeEnter guard checks login status with isLoggedIn() and redirects to '/login' if not logged in.

Practice

1. What is the main purpose of Vue Router's beforeEach navigation guard?

easy

A. To run a function before every route change globally

B. To run a function only after a route has been entered

C. To modify the route's component before rendering

D. To delay the route change indefinitely

Solution

1. Step 1: Understand the role of beforeEach

   beforeEach is a global navigation guard that runs before every route change in the app.

2. Step 2: Compare options with the guard's behavior

   To run a function before every route change globally correctly states it runs before every route change globally. Other options describe incorrect or unrelated behaviors.

3. Final Answer:

   To run a function before every route change globally -> Option A

4. Quick Check:

   Global guard before route change = A [OK]

Hint: beforeEach runs before every route change globally [OK]

Common Mistakes:

• Confusing beforeEach with afterEach
• Thinking beforeEach runs only on specific routes
• Assuming beforeEach modifies components directly

2. Which of the following is the correct syntax to add a beforeEnter guard to a route in Vue Router?

easy

A. { path: '/home', component: Home, beforeEnter(to, from, next) { next() } }

B. { path: '/home', component: Home, beforeEnter: function(to, from, next) { next() } }

C. { path: '/home', component: Home, beforeEnter: (to, from, next) => { next() } }

D. router.beforeEnter('/home', (to, from, next) => next())

Solution

1. Step 1: Identify correct route object syntax

   Vue Router expects beforeEnter as a property with a function value inside the route object.

2. Step 2: Check each option's syntax

   { path: '/home', component: Home, beforeEnter: function(to, from, next) { next() } } uses beforeEnter: function(to, from, next) { next() } which is valid. { path: '/home', component: Home, beforeEnter(to, from, next) { next() } } misses the colon. { path: '/home', component: Home, beforeEnter: (to, from, next) => { next() } } uses arrow function which is valid but less common in examples. router.beforeEnter('/home', (to, from, next) => next()) is invalid syntax for route config.

3. Final Answer:

   { path: '/home', component: Home, beforeEnter: function(to, from, next) { next() } } -> Option B

4. Quick Check:

   Route guard syntax uses colon and function = C [OK]

Hint: Use colon and function for beforeEnter in route object [OK]

Common Mistakes:

• Omitting colon before beforeEnter
• Trying to call beforeEnter on router instance
• Using arrow function without colon

3. Given this Vue Router setup, what will happen when navigating to /dashboard?

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, beforeEnter(to, from, next) {
      if (!isLoggedIn()) next('/login')
      else next()
    } }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('Global guard')
  next()
})

medium

A. Navigation blocked with no console output

B. Console logs 'Global guard' and navigates to /dashboard regardless

C. Console logs 'Global guard' and navigates to /login if not logged in

D. Syntax error due to missing next() call

Solution

1. Step 1: Analyze global beforeEach guard

   The global guard logs 'Global guard' and calls next(), so navigation proceeds.

2. Step 2: Analyze route-specific beforeEnter guard

   beforeEnter checks if user is logged in. If not, it redirects to '/login'. Otherwise, it allows navigation.

3. Final Answer:

   Console logs 'Global guard' and navigates to /login if not logged in -> Option C

4. Quick Check:

   Global guard logs + route guard redirects if not logged in = A [OK]

Hint: Global guard runs first, then route guard decides next step [OK]

Common Mistakes:

• Ignoring global guard console log
• Assuming navigation always succeeds
• Forgetting next() call in guards

4. Identify the error in this Vue Router navigation guard code:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (!userIsLoggedIn) {
      next('/login')
    }
  }
  next()
})

medium

A. Missing call to next() inside the if block causes navigation to continue twice

B. userIsLoggedIn should be a function call

C. to.meta.requiresAuth is not a valid property

D. next() is called twice, causing navigation to fail

Solution

1. Step 1: Trace next() calls in the guard

   If to.meta.requiresAuth is true and user is not logged in, next('/login') is called. Then outside the if block, next() is called again unconditionally.

2. Step 2: Understand consequences of calling next() twice

   Calling next() twice causes Vue Router to throw an error and navigation fails.

3. Final Answer:

   next() is called twice, causing navigation to fail -> Option D

4. Quick Check:

   Two next() calls in one guard = B [OK]

Hint: Call next() only once per guard to avoid errors [OK]

Common Mistakes:

• Calling next() multiple times in one guard
• Not returning after next('/login')
• Assuming meta is always defined

5. You want to protect a nested route /admin/settings so that only logged-in users can access it. You have a global beforeEach guard and a route-level beforeEnter guard on /admin. Which approach correctly ensures the user is redirected to /login if not logged in, without redundant checks?

hard

A. Check login only in global beforeEach; remove beforeEnter guard from /admin route

B. Check login only in beforeEnter guard on /admin; global beforeEach does not check login

C. Check login in both global beforeEach and beforeEnter guard on /admin

D. Do not check login in any guard; rely on component logic

Solution

1. Step 1: Understand guard execution order and redundancy

   Global beforeEach runs before every route, including nested ones. Route-level beforeEnter runs after global guards.

2. Step 2: Avoid redundant login checks

   Checking login in both guards causes duplicate redirects and complexity. Checking only in global guard covers all routes.

3. Final Answer:

   Check login only in global beforeEach; remove beforeEnter guard from /admin route -> Option A

4. Quick Check:

   Single global guard for login check avoids redundancy = A [OK]

Hint: Use global guard for login checks to avoid duplicate logic [OK]

Common Mistakes:

• Duplicating login checks in multiple guards
• Relying on component logic instead of guards
• Ignoring nested route guard order