---
title: "Navigation guards: protecting routes the right way · vuejs.school"
description: "Vue Router guards that send visitors to login and back, warn about unsaved changes and set page titles, without redirect loops or a false sense of security."
canonical_url: "https://vuejs.school/community/blog/navigation-guards-protecting-routes"
meta:
"og:description": "Vue Router guards that send visitors to login and back, warn about unsaved changes and set page titles, without redirect loops or a false sense of security."
"og:image": "https://vuejs.school/_og/d/a_~TmF2aWdhdGlvbiBndWFyZHM6IHByb3RlY3Rpbmcgcm91dGVzIHRoZSByaWdodCB3YXkgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_~TmF2aWdhdGlvbiBndWFyZHM6IHByb3RlY3Rpbmcgcm91dGVzIHRoZSByaWdodCB3YXk%2Cdescription_~VnVlIFJvdXRlciBndWFyZHMgdGhhdCBzZW5kIHZpc2l0b3JzIHRvIGxvZ2luIGFuZCBiYWNrLCB3YXJuIGFib3V0IHVuc2F2ZWQgY2hhbmdlcyBhbmQgc2V0IHBhZ2UgdGl0bGVzLCB3aXRob3V0IHJlZGlyZWN0IGxvb3BzIG9yIGEgZmFsc2Ugc2Vuc2Ugb2Ygc2VjdXJpdHku%2Ceyebrow_~VHV0b3JpYWwgwrcgNiBtaW4gcmVhZA%2Ctint_peach%2Cp_Ii9jb21tdW5pdHkvYmxvZy9uYXZpZ2F0aW9uLWd1YXJkcy1wcm90ZWN0aW5nLXJvdXRlcyI%2Cs_2RKgGWDELLXnPHpZ.png"
"og:image:alt": "Navigation guards: protecting routes the right way · vuejs.school"
"og:image:height": "600"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "Navigation guards: protecting routes the right way · vuejs.school"
"twitter:image": "https://vuejs.school/_og/d/a_~TmF2aWdhdGlvbiBndWFyZHM6IHByb3RlY3Rpbmcgcm91dGVzIHRoZSByaWdodCB3YXkgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_~TmF2aWdhdGlvbiBndWFyZHM6IHByb3RlY3Rpbmcgcm91dGVzIHRoZSByaWdodCB3YXk%2Cdescription_~VnVlIFJvdXRlciBndWFyZHMgdGhhdCBzZW5kIHZpc2l0b3JzIHRvIGxvZ2luIGFuZCBiYWNrLCB3YXJuIGFib3V0IHVuc2F2ZWQgY2hhbmdlcyBhbmQgc2V0IHBhZ2UgdGl0bGVzLCB3aXRob3V0IHJlZGlyZWN0IGxvb3BzIG9yIGEgZmFsc2Ugc2Vuc2Ugb2Ygc2VjdXJpdHku%2Ceyebrow_~VHV0b3JpYWwgwrcgNiBtaW4gcmVhZA%2Ctint_peach%2Cp_Ii9jb21tdW5pdHkvYmxvZy9uYXZpZ2F0aW9uLWd1YXJkcy1wcm90ZWN0aW5nLXJvdXRlcyI%2Cs_2RKgGWDELLXnPHpZ.png"
"twitter:image:alt": "Navigation guards: protecting routes the right way · vuejs.school"
---
> Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt)
## What a guard returns
A navigation guard is a function the router runs while it is deciding whether to move from one route to another. It receives `to`, the route being entered, and `from`, the route being left. What you return decides what happens:
- Return nothing, or `true`: the navigation continues.
- Return `false`: the navigation is cancelled and the URL stays where it was.
- Return a route location, such as `'/login'` or `{ name: 'login' }`: the router goes there instead.
You may have seen a third argument called `next`. It still exists for old code, but the docs recommend the return style, and mixing the two in one guard is a bug. This post never uses `next`.
A guard may also be `async`. If the sign-in state has to be loaded from the server before you can decide, return a promise and the router waits for it before it moves on. A slow guard is a slow navigation, though, so load the session once, keep it in memory, and let later guards read the cached answer.
Guards live in three places:
- On the router: `beforeEach`, `beforeResolve` and `afterEach`.
- On a route record: `beforeEnter`.
- Inside a page component: `onBeforeRouteLeave` and `onBeforeRouteUpdate`.
You will use four of them: `beforeEach` for sign-in, `beforeEnter` for an admin role, `onBeforeRouteLeave` for unsaved changes and `afterEach` for page titles.
## Mark the routes that need sign-in
A route record can carry a `meta` object with anything you like. Use it to say which routes need a signed-in user. This is the router file that the later guards are added to:
*src/router/index.ts*
```
import { createRouter, createWebHistory } from 'vue-router'
export const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'home', component: () => import('../pages/HomePage.vue') },
{ path: '/login', name: 'login', component: () => import('../pages/LoginPage.vue') },
{
path: '/account',
name: 'account',
component: () => import('../pages/AccountPage.vue'),
meta: { requiresAuth: true, title: 'Account' },
},
],
})
```
For TypeScript to know about `requiresAuth`, declare it once. Vue Router exposes a `RouteMeta` interface for exactly this:
*src/router/meta.d.ts*
```
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
title?: string
}
}
```
Keep the `import 'vue-router'` line: it makes the file a module, so `declare module` adds to Vue Router's types instead of replacing them.
Now `to.meta.requiresAuth` is typed as `boolean | undefined` everywhere, and `meta: { requiresAuth: 'yes' }` on a route is a compile error. A misspelt key still compiles, though. `RouteMeta` accepts any other key as `unknown`, so a typo like `to.meta.requiresAuht` is a silent `undefined` at runtime.
## Send visitors to login and back
Keep the sign-in state in a small module that the router and the login page both import. A plain `ref` is enough for this post; a store works the same way.
*src/auth.ts*
```
import { ref } from 'vue'
export const isSignedIn = ref(false)
export const isAdmin = ref(false)
```
Add the guard to `src/router/index.ts`, below `createRouter`, with the import at the top of the file. The important line is the `query`: it stores the full path of the page the person wanted, so the login page can send them back.
*src/router/index.ts*
```
import { isSignedIn } from '../auth'
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isSignedIn.value) {
return { name: 'login', query: { redirect: to.fullPath } }
}
})
```
`to.fullPath` includes the query string and the hash, so `/account?tab=billing` survives the round trip. On the login page, read it back after a successful sign-in:
*src/pages/LoginPage.vue*
```
```
`router.replace` rather than `router.push`, so the login page does not stay in the history and the back button does not return to it. The `typeof` check matters because a query value can also be an array or `null`, and a redirect to `null` is not a page.
## Avoid the redirect loop
A common mistake with `beforeEach` is to send every signed-out visitor to the login page, wherever they are going:
*src/router/index.ts**Breaks***
```
router.beforeEach((to) => {
if (!isSignedIn.value) {
return { name: 'login' }
}
})
```
A signed-out person opens `/login`. The guard runs, sees they are signed out, and redirects to `/login`. That is a new navigation, so the guard runs again, and again. In development Vue Router notices and prints `Detected a possibly infinite redirection in a navigation guard when going from "/" to "/login". Aborting to avoid a Stack Overflow.` In production the page just hangs.
The fix is the guard you already wrote. It redirects only when the destination needs it, which is what `meta.requiresAuth` was for:
*src/router/index.ts**Works***
```
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isSignedIn.value) {
return { name: 'login', query: { redirect: to.fullPath } }
}
})
```
The rule generalises: a guard must have at least one path through it that returns nothing, and the route it redirects to must take that path. If you also want to keep signed-in users away from `/login`, add a second condition, `if (to.name === 'login' && isSignedIn.value) return { name: 'account' }`, and check that `/account` does not bounce them back.
## Check a role on one route with beforeEnter
Some checks belong to one route only. An admin page that needs a role is the classic case. Put it on the record with `beforeEnter`, and it never runs for any other route:
*src/router/index.ts*
```
import type { RouteRecordRaw } from 'vue-router'
import { isAdmin } from '../auth'
const adminRoute: RouteRecordRaw = {
path: '/admin',
name: 'admin',
component: () => import('../pages/AdminPage.vue'),
meta: { requiresAuth: true, title: 'Admin' },
beforeEnter: () => {
if (!isAdmin.value) return { name: 'home' }
},
}
```
Declare it in `src/router/index.ts` above `createRouter`, and add `adminRoute` to the `routes` array.
Order matters here: `beforeEach` runs first, so by the time `beforeEnter` runs the sign-in check has already passed and this guard only has to think about the role. `beforeEnter` runs when entering the route from a different route. It does not run again when only the params, query or hash change.
## Warn before unsaved changes are lost
The guard that stops a person losing work lives in the component, because only the component knows whether the form is dirty:
*src/pages/AccountPage.vue*
```
```
`onBeforeRouteLeave` is called in `