Navigation guards (beforeEach, beforeEnter) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a global beforeEach guard blocks navigation?

Consider a Vue Router setup with a beforeEach guard that checks if a user is authenticated. If not, it redirects to a login page.

What will be the rendered output if a user tries to visit a protected route without being authenticated?

Vue

router.beforeEach((to, from, next) => {
  if (!isAuthenticated() && to.name !== 'login') {
    next({ name: 'login' });
  } else {
    next();
  }
})

A The user is immediately redirected to the login page without seeing the protected page.

B The user sees the protected page content briefly, then is redirected to login.

C The navigation is blocked and the user stays on the current page with no change.

D The router throws an error because next() is called twice.

💡 Hint

Think about when next() is called with a redirect object.

The beforeEach guard intercepts navigation before the route changes. If the user is not authenticated, calling next({ name: 'login' }) immediately redirects to the login page without rendering the protected page.

❓ state_output

intermediate

What is the value of 'accessGranted' after beforeEnter guard runs?

Given a route with a beforeEnter guard that sets a variable accessGranted to true only if a query parameter token equals 'abc123'. What is the value of accessGranted after navigating to /dashboard?token=abc123?

Vue

let accessGranted = false;
const routes = [
  {
    path: '/dashboard',
    beforeEnter: (to, from, next) => {
      if (to.query.token === 'abc123') {
        accessGranted = true;
        next();
      } else {
        next(false);
      }
    }
  }
];

A false

B true

C null

D undefined

💡 Hint

Check the condition inside the beforeEnter guard and the query parameter value.

The beforeEnter guard sets accessGranted to true only if the query parameter token equals 'abc123'. Since the URL has ?token=abc123, the condition is true and accessGranted becomes true.

📝 Syntax

advanced

Which option causes a syntax error in a beforeEach guard?

Identify which beforeEach guard code snippet will cause a syntax error in Vue Router.

A router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { next(); } else { next(false); } })

B router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) next(); else next(false); })

C router.beforeEach((to, from, next) => { if to.meta.requiresAuth { next(); } else { next(false); } })

D )} ;)eslaf(txen esle ;)(txen )htuAseriuqer.atem.ot( fi { >= )txen ,morf ,ot((hcaEerofeb.retuor

💡 Hint

Look carefully at the syntax of the if statement.

Option C is missing parentheses around the if condition, which is required in JavaScript syntax. This causes a syntax error.

🔧 Debug

advanced

Why does navigation get stuck when using next() incorrectly?

In a beforeEach guard, the code calls next() twice under certain conditions. What is the effect on navigation?

Vue

router.beforeEach((to, from, next) => {
  if (to.name === 'home') {
    next();
    next(false);
  } else {
    next();
  }
})

A Navigation proceeds normally to the 'home' route.

B Navigation is aborted and the user stays on the current page.

C Navigation proceeds but with a warning in the console.

D Navigation causes an error and the app crashes.

💡 Hint

Check what happens if next() is called more than once.

Calling next() multiple times in the same guard causes Vue Router to throw an error and can crash the app or break navigation.

🧠 Conceptual

expert

Which guard type runs first during navigation in Vue Router?

Vue Router supports multiple navigation guards: beforeEach, beforeEnter, and component guards like beforeRouteEnter. Which guard runs first when navigating to a new route?

A <code>beforeEach</code> global guard

B <code>beforeEnter</code> guard on the route

C Component's <code>beforeRouteEnter</code> guard

D After navigation is confirmed

💡 Hint

Think about the order of global vs route-specific guards.

The global beforeEach guard runs first before any route-specific beforeEnter or component guards. This allows global checks before entering any route.