Vue Academy · Урок

Навигационные охранники

Защищайте маршруты и запускайте логику при навигации с помощью охранников

«Навигационные охранники» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое защитники навигации

Защитники навигации позволяют выполнять код до, во время или после изменения маршрута.

Блокировать навигацию или перенаправлять пользователя
Проверять аутентификацию
Запрашивать подтверждение перед уходом со страницы

Типы защитников

Существует три уровня защитников:

Глобальные защитники выполняются при каждой навигации
Для отдельного маршрута выполняются только для одного конкретного маршрута
Внутри компонента выполняются внутри компонента

Глобальный защитник beforeEach

router.beforeEach выполняется перед каждой навигацией. Он получает целевой и текущий маршруты.

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

Разрешение или перенаправление

В Vue Router 4 возвращайте значение, чтобы управлять ходом навигации.

Возвратите true или ничего, чтобы разрешить навигацию
Возвратите false, чтобы отменить её
Возвратите расположение маршрута, чтобы выполнить перенаправление

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

Мета-поля маршрута

Добавляйте к маршрутам пользовательские данные meta, например requiresAuth, и считывайте их в защитниках.

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

Защитник аутентификации

Распространённый подход — защищать маршруты, проверяя аутентификацию в глобальном защитнике.

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

beforeEnter для отдельного маршрута

beforeEnter защищает один маршрут непосредственно в его определении.

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

Защитники внутри компонента

Компоненты могут определять собственные защитники. onBeforeRouteLeave выполняется при переходе со страницы.

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

onBeforeRouteUpdate

onBeforeRouteUpdate выполняется, когда маршрут изменяется, но тот же компонент переиспользуется, например при изменении параметра.

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

Функция обратного вызова next в классическом стиле

В старом коде для управления навигацией используется третий аргумент — next. Сейчас предпочтительнее возвращать значение.

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})

Возвращаемое значение и next()

Два стиля с одной целью:

Вернуть значение — современный и более чистый способ: true, false или расположение
Вызвать next() — классический способ: продолжить навигацию или перенаправить пользователя

Не смешивайте их в одном защитнике. Для нового кода рекомендуется стиль с возвращаемым значением.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли работу защитников навигации.

Итоги: защитники навигации

Вы научились управлять навигацией:

Глобальный защитник beforeEach выполняется для каждого маршрута
Возвращайте true, чтобы разрешить переход, false — чтобы отменить его, или расположение — чтобы перенаправить пользователя
Мета-поля meta, такие как requiresAuth, управляют проверками аутентификации
beforeEnter защищает один маршрут
Защитники внутри компонента, например onBeforeRouteLeave, обрабатывают уход со страницы

Вы завершили базовый курс по Vue.js!

Часто задаваемые вопросы

Урок «Навигационные охранники» бесплатный?

Да — полный текст урока «Навигационные охранники» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Навигационные охранники»?

Защищайте маршруты и запускайте логику при навигации с помощью охранников Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Навигационные охранники»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy