Vue Academy · Урок

Мета-поля маршрутов и типизация

meta: { requiresAuth: true }, объединение объявлений TypeScript для типизированных метаданных

Урок 1 из 413 шагов

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

Что такое поля метаданных маршрута

Каждый маршрут может содержать объект meta: произвольные данные, прикреплённые к маршруту. Он отлично подходит для таких флагов, как требования к аутентификации, разрешённые роли, заголовки страниц или варианты макета.

Добавление метаданных к маршруту

Укажите ключ meta в записи маршрута. Значения полностью зависят от Вас.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }
  }
]

Чтение метаданных в охраннике

Самый распространённый вариант использования — охранник навигации. router.beforeEach выполняется перед каждой навигацией и получает целевой маршрут, метаданные meta которого можно проверить.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // check login
  }
})

Перенаправление неаутентифицированных пользователей

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

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login' }
  }
})

Доступ на основе ролей

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

router.beforeEach((to) => {
  const auth = useAuthStore()
  const roles = to.meta.roles
  if (roles && !roles.includes(auth.role)) {
    return { path: '/forbidden' }
  }
})

Метаданные объединяются с родительскими

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

Проблема типизации

По умолчанию TypeScript типизирует meta как пустой объект, поэтому to.meta.requiresAuth вызывает ошибку. Исправить это можно с помощью слияния объявлений с типами Vue Router.

Объявление типизированных метаданных

Расширьте интерфейс RouteMeta из vue-router. Разместите это объявление в файле .d.ts или в любом модуле с конструкцией export {}.

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

export {}

Теперь метаданные проверяются по типам

После расширения типов компилятор знает структуру meta. Опечатки вроде requireAuth обнаруживаются, а автодополнение работает.

router.beforeEach((to) => {
  if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})

Использование метаданных в компонентах

Внутри компонента можно прочитать метаданные текущего маршрута через useRoute() — благодаря расширению типов они также типизированы.

import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuth

Метаданные для заголовков страниц

Распространённый подход: хранить title в метаданных и задавать document.title из глобального охранника.

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title
})

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

Проверьте свои знания о метаданных маршрутов и типизации.

Ответь в интерактивном уроке

Итоги

Поля метаданных маршрута содержат данные конкретного маршрута:

Определяйте метаданные в записях маршрутов (requiresAuth, roles, title).
Читайте их в router.beforeEach, чтобы контролировать навигацию.
Метаданные объединяются от родительских маршрутов к дочерним.
Типизируйте их с помощью слияния объявлений для RouteMeta из vue-router.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Мета-поля маршрутов и типизация» бесплатный?

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

Чему я научусь в уроке «Мета-поля маршрутов и типизация»?

meta: { requiresAuth: true }, объединение объявлений TypeScript для типизированных метаданных Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Мета-поля маршрутов и типизация»?

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

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

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

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

← Назад к Vue Academy