Що таке navigation guard?

VueJunior~1 хв читання

Navigation Guard - це механізм Vue Router, який дозволяє перехоплювати переходи між маршрутами і виконувати логіку до, під час або після навігації.

Простіше кажучи:

Navigation Guard - це "охоронець", який вирішує, чи можна перейти на маршрут, чи потрібно перенаправити або скасувати перехід.

Використовується для:

авторизації
перевірки прав
завантаження даних
підтверджень ("Ви впевнені, що хочете піти?")
логування
редиректів

У Vue Router є 3 рівні guard'ів.

1. Глобальні Guards

Спрацьовують при кожному переході.

`router.beforeEach`

Основний guard для перевірок:

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

`router.beforeResolve`

Спрацьовує після beforeEach, перед тим як завершити маршрут.

`router.afterEach`

Спрацьовує після переходу (side-effects: аналітика, логування):

router.afterEach((to, from) => {
  console.log('Перейшли на', to.fullPath)
})

2. Guards на рівні маршруту

Додаються прямо в об'єкті маршруту:

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    beforeEnter(to, from, next) {
      if (!isAdmin) next('/not-authorized')
      else next()
    }
  }
]

Використовуються для логіки, що стосується конкретного маршруту.

3. Guards всередині компонентів

`beforeRouteEnter`

beforeRouteEnter(to, from, next) {
  next(vm => {
    // доступ до vm - екземпляра компонента
  })
}

`beforeRouteUpdate`

Спрацьовує, коли маршрут оновився, але компонент повторно використовується (наприклад /users/1 → /users/2):

beforeRouteUpdate(to, from, next) {
  this.fetchUser()
  next()
}

`beforeRouteLeave`

Спрацьовує при виході зі сторінки:

beforeRouteLeave(to, from, next) {
  if (this.isDirty) {
    const answer = confirm("Вийти без збереження?")
    answer ? next() : next(false)
  } else {
    next()
  }
}

Перевірка авторизації:

if (!isLoggedIn) next('/login')

Перевірка прав доступу:

if (!user.isAdmin) next('/403')

Попереднє завантаження даних (SSR або великі сторінки)

Запобігання виходу зі сторінки:

Наприклад, незбережені зміни.

Перенаправлення:

next({ name: 'home' })

Що важливо знати для співбесіди

1) Guards повинні викликати `next()` (крім `afterEach`)

Інакше навігація зависне.

2) У Vue Router 4 (`Vue 3`) `next()` часто можна не використовувати

Можна повертати:

true - дозволити
false - скасувати
{ name: 'route' } - редирект
undefined - теж дозволити

Приклад:

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    return { name: 'login' }
  }
})

3) Глобальні guards застосовуються до всіх маршрутів

Компонентні - тільки до одного.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.