Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке navigation guard?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

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

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

---

## Типи navigation guards

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

---

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

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

#### `router.beforeEach`

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

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

#### `router.beforeResolve`

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

#### `router.afterEach`

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

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

---

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

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

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

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

---

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

#### `beforeRouteEnter`

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

#### `beforeRouteUpdate`

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

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

#### `beforeRouteLeave`

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

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

---

## Коли використовувати navigation guards?

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

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

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

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

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

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

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

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

```js
next({ name: 'home' })
```

---

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

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

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

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

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

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

Приклад:

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

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати393 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.