Navigation guards (beforeEach, beforeEnter) in Vue - Step-by-Step Execution

Concept Flow - Navigation guards (beforeEach, beforeEnter)

User tries to navigate

↓

Global beforeEach guard runs

↓

Route-specific beforeEnter guard runs

↓

Navigation completes

When a user tries to change pages, Vue runs global guards first, then route-specific guards. Each guard can allow or stop navigation.

Execution Sample

Vue

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

This code checks before every navigation if the target page needs login; if not logged in, it redirects to login.

Execution Table

Step	Guard Type	Condition Checked	Result	Navigation Action
1	beforeEach	to.meta.requiresAuth = true, isLoggedIn() = false	Condition true	Redirect to '/login'
2	beforeEnter (for '/login')	No special condition	Allow	Proceed to '/login'
3	Navigation	At '/login'	Complete	Page loads '/login'
4	User tries to go to '/dashboard'	to.meta.requiresAuth = true, isLoggedIn() = true	Condition false	Allow navigation
5	beforeEnter (for '/dashboard')	No special condition	Allow	Proceed to '/dashboard'
6	Navigation	At '/dashboard'	Complete	Page loads '/dashboard'
7	User tries to go to '/public'	to.meta.requiresAuth = false	Condition false	Allow navigation
8	beforeEnter (for '/public')	No special condition	Allow	Proceed to '/public'
9	Navigation	At '/public'	Complete	Page loads '/public'
10	User tries to go to '/admin'	to.meta.requiresAuth = true, isLoggedIn() = false	Condition true	Redirect to '/login'
11	Navigation aborted	Redirected	Stop	Navigation stops, user redirected

💡 Navigation stops or proceeds based on guard checks; redirects cause new navigation cycle.

Variable Tracker

Variable	Start	After Step 1	After Step 4	After Step 7	After Step 10	Final
to.meta.requiresAuth	varies	true	true	false	true	true or false depending on route
isLoggedIn()	false	false	true	true	false	varies
Navigation Action	none	redirect to '/login'	allow	allow	redirect to '/login'	final navigation or redirect

Key Moments - 3 Insights

Why does navigation redirect to '/login' even though the user tried to go to '/admin'?

Because the global beforeEach guard checks if the route requires authentication and the user is not logged in (see execution_table step 10). It redirects before entering the route.

What happens if beforeEach calls next() without arguments?

Navigation continues to the next guard or the route itself (see execution_table steps 4 and 7 where next() allows navigation).

Can beforeEnter guard override the decision of beforeEach?

Yes, beforeEnter runs after beforeEach and can allow or block navigation independently (see execution_table steps 2 and 5).

Visual Quiz - 3 Questions

Look at the execution table, what navigation action happens at step 1?

A Allow navigation to requested route

B Abort navigation without redirect

C Redirect to '/login'

D Reload current page

💡 Hint

Check the 'Navigation Action' column at step 1 in the execution_table.

At which step does the user successfully navigate to '/dashboard'?

A Step 6

B Step 3

C Step 9

D Step 11

💡 Hint

Look for '/dashboard' in the 'Navigation' column in the execution_table.

If isLoggedIn() returned false at step 4, what would happen?

A Navigation would abort without redirect

B Navigation would redirect to '/login'

C Navigation would proceed to '/dashboard'

D Navigation would reload the current page

💡 Hint

Refer to the condition and action in execution_table step 1 and step 10 for similar cases.

Concept Snapshot

Vue Navigation Guards:
- beforeEach: global guard runs before every route change
- beforeEnter: route-specific guard runs before entering that route
- Guards check conditions and call next() to allow or redirect
- Navigation stops if next() is called with a redirect or false
- Guards run in order: beforeEach then beforeEnter
- Use guards to protect routes or redirect users

Full Transcript

When a user tries to change pages in a Vue app, the router runs global guards called beforeEach first. These guards check conditions like if the user is logged in. If the guard calls next() with a redirect path, navigation stops and restarts at the new path. If next() is called without arguments, navigation continues. After beforeEach, route-specific guards called beforeEnter run for the target route. They can also allow or block navigation. This process ensures only allowed users can access certain pages. The execution table shows steps where navigation is allowed or redirected based on login status and route requirements.