Explain navigation guards and provide an auth use case

WHAT THIS TESTS: This question tests whether you understand the router as a stateful navigation process rather than a simple URL mapper. Interviewers want to see that you know guards are interceptors that can asynchronously block, redirect, or allow a transition, and that you can distinguish global, per-route, and in-component hooks. Senior candidates should also show awareness of pending navigation states and the consequences of improper guard resolution.

A GOOD ANSWER COVERS: First, define a navigation guard as a hook that intercepts route transitions before they complete. Second, describe the three hook scopes: global guards like beforeEach that run on every navigation, per-route guards defined in the route configuration, and in-component guards such as beforeRouteEnter. Third, explain the return value contract: returning false cancels the navigation and resets the URL if it changed, returning a route location object redirects to a new target, and returning nothing or true validates the navigation and moves to the next guard. Fourth, mention that guards can be async and that the navigation stays pending until all hooks resolve. Fifth, give a concrete auth use case.

COMMON WRONG ANSWERS: A major red flag is describing guards as mere event listeners or callbacks without discussing return values. Another mistake is conflating client-side guards with real security; guards improve UX but do not replace server-side auth. Some candidates still use the legacy next() callback pattern without knowing it is error-prone and largely unnecessary in modern Vue Router. Finally, forgetting to handle infinite redirect loops, such as redirecting an unauthenticated user to login from the login page itself, shows weak edge-case thinking.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle async authentication checks inside a guard, or how to prevent flash-of-unauthorized-content before the guard resolves. They may also ask about the difference between beforeEach and beforeResolve, or how to implement role-based access control using route meta fields. Another common follow-up is how to test navigation guards in unit or e2e suites.

ONE CONCRETE EXAMPLE: Imagine a Vue Router setup with a /dashboard route that requires a valid session token. In router.beforeEach, you check an isAuthenticated flag. If the user is not authenticated and the target route is not already Login, you return { name: 'Login' }. This drops the current navigation and creates a new one to the login page. If the user is authenticated, you return nothing and the navigation proceeds. You also ensure the login route itself does not trigger another redirect, avoiding an infinite loop.