1---
2title: Navigation Guard Infinite Redirect Loops
3impact: HIGH
4impactDescription: Misconfigured navigation guards can trap users in infinite redirect loops, crashing the browser or making the app unusable
5type: gotcha
6tags: [vue3, vue-router, navigation-guards, redirect, debugging]
7---
8 
9# Navigation Guard Infinite Redirect Loops
10 
11**Impact: HIGH** - A common mistake in navigation guards is creating conditions that cause infinite redirects. Vue Router will detect this and show a warning, but in production, it can crash the browser or create a broken user experience.
12 
13## Task Checklist
14 
15- [ ] Always check if already on target route before redirecting
16- [ ] Test guard logic with all possible navigation scenarios
17- [ ] Add route meta to control which routes need protection
18- [ ] Use Vue Router devtools to debug redirect chains
19 
20## The Problem
21 
22```javascript
23// WRONG: Infinite loop - always redirects to login, even when on login!
24router.beforeEach((to, from) => {
25  if (!isAuthenticated()) {
26    return '/login'  // Redirects to /login, which triggers guard again...
27  }
28})
29 
30// WRONG: Circular redirect between two routes
31router.beforeEach((to, from) => {
32  if (to.path === '/dashboard' && !hasProfile()) {
33    return '/profile'
34  }
35  if (to.path === '/profile' && !isVerified()) {
36    return '/dashboard'  // Back to dashboard, which goes to profile...
37  }
38})
39```
40 
41**Error you'll see:**
42```
43[Vue Router warn]: Detected an infinite redirection in a navigation guard when going from "/" to "/login". Aborting to avoid a Stack Overflow.
44```
45 
46## Solution 1: Exclude Target Route
47 
48```javascript
49// CORRECT: Don't redirect if already going to login
50router.beforeEach((to, from) => {
51  if (!isAuthenticated() && to.path !== '/login') {
52    return '/login'
53  }
54})
55 
56// CORRECT: Use route name for cleaner check
57router.beforeEach((to, from) => {
58  const publicPages = ['Login', 'Register', 'ForgotPassword']
59 
60  if (!isAuthenticated() && !publicPages.includes(to.name)) {
61    return { name: 'Login' }
62  }
63})
64```
65 
66## Solution 2: Use Route Meta Fields
67 
68```javascript
69// router.js
70const routes = [
71  {
72    path: '/login',
73    name: 'Login',
74    component: Login,
75    meta: { requiresAuth: false }
76  },
77  {
78    path: '/dashboard',
79    name: 'Dashboard',
80    component: Dashboard,
81    meta: { requiresAuth: true }
82  },
83  {
84    path: '/public',
85    name: 'PublicPage',
86    component: PublicPage,
87    meta: { requiresAuth: false }
88  }
89]
90 
91// Guard checks meta field
92router.beforeEach((to, from) => {
93  // Only redirect if route requires auth
94  if (to.meta.requiresAuth && !isAuthenticated()) {
95    return { name: 'Login', query: { redirect: to.fullPath } }
96  }
97})
98```
99 
100## Solution 3: Handle Redirect Chains Carefully
101 
102```javascript
103// CORRECT: Break potential circular redirects
104router.beforeEach((to, from) => {
105  // Prevent redirect loops by tracking redirect depth
106  const redirectCount = to.query._redirectCount || 0
107 
108  if (redirectCount > 3) {
109    console.error('Too many redirects, stopping at:', to.path)
110    return '/error'  // Escape hatch
111  }
112 
113  if (needsRedirect(to)) {
114    return {
115      path: getRedirectTarget(to),
116      query: { ...to.query, _redirectCount: redirectCount + 1 }
117    }
118  }
119})
120```
121 
122## Solution 4: Centralized Redirect Logic
123 
124```javascript
125// guards/auth.js
126export function createAuthGuard(router) {
127  const publicRoutes = new Set(['Login', 'Register', 'ForgotPassword', 'ResetPassword'])
128  const guestOnlyRoutes = new Set(['Login', 'Register'])
129 
130  router.beforeEach((to, from) => {
131    const isPublic = publicRoutes.has(to.name)
132    const isGuestOnly = guestOnlyRoutes.has(to.name)
133    const isLoggedIn = isAuthenticated()
134 
135    // Not logged in, trying to access protected route
136    if (!isLoggedIn && !isPublic) {
137      return { name: 'Login', query: { redirect: to.fullPath } }
138    }
139 
140    // Logged in, trying to access guest-only route (like login page)
141    if (isLoggedIn && isGuestOnly) {
142      return { name: 'Dashboard' }
143    }
144 
145    // All other cases: proceed
146  })
147}
148```
149 
150## Debugging Redirect Loops
151 
152```javascript
153// Add logging to understand the redirect chain
154router.beforeEach((to, from) => {
155  console.log(`Navigation: ${from.path} -> ${to.path}`)
156  console.log('Auth state:', isAuthenticated())
157  console.log('Route meta:', to.meta)
158 
159  // Your guard logic here
160})
161 
162// Or use afterEach for confirmed navigations
163router.afterEach((to, from) => {
164  console.log(`Navigated: ${from.path} -> ${to.path}`)
165})
166```
167 
168## Common Redirect Loop Patterns
169 
170| Pattern | Problem | Fix |
171|---------|---------|-----|
172| Auth check without exclusion | Login redirects to login | Exclude `/login` from check |
173| Role-based with circular deps | Admin -> User -> Admin | Use single source of truth for role requirements |
174| Onboarding flow | Step 1 -> Step 2 -> Step 1 | Track completion state properly |
175| Redirect query handling | Reading redirect creates new redirect | Process redirect only once |
176 
177## Key Points
178 
1791. **Always exclude the target route** - Never redirect to a route that would trigger the same redirect
1802. **Use route meta fields** - Cleaner than path string comparisons
1813. **Test edge cases** - Direct URL access, refresh, back button
1824. **Add logging during development** - Helps trace redirect chains
1835. **Have an escape hatch** - Error page or max redirect count
184 
185## Reference
186- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)
187- [Vue Router Route Meta Fields](https://router.vuejs.org/guide/advanced/meta.html)
188