Vue Academy · Lekcja

Pola meta tras i typowanie

meta: { requiresAuth: true }, scalanie deklaracji TypeScript w celu typowania meta.

Lekcja 1 z 413 kroki

Pola meta tras i typowanie to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym są pola meta trasy?

Każda trasa może zawierać obiekt meta: dowolne dane dołączone do trasy. Doskonale nadaje się on do przechowywania flag, takich jak wymagane uwierzytelnianie, dozwolone role, tytuły stron czy wybór układu.

Dodawanie meta do trasy

Należy ustawić klucz meta w rekordzie trasy. Wartości zależą wyłącznie od Państwa potrzeb.

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

Odczytywanie meta w strażniku

Najczęstsze zastosowanie to użycie w strażniku nawigacji. router.beforeEach uruchamia się przed każdą nawigacją i otrzymuje docelową trasę, której obiekt meta można sprawdzić.

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

Przekierowywanie nieuwierzytelnionych użytkowników

Aby wykonać przekierowanie, należy zwrócić lokalizację trasy ze strażnika. Zwrócenie false anuluje nawigację, a zwrócenie niczego lub true pozwala ją kontynuować.

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

Dostęp oparty na rolach

Należy połączyć pole meta roles z rolą bieżącego użytkownika, aby ograniczać dostęp do stron na podstawie uprawnień.

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

Meta jest dziedziczone po trasach nadrzędnych

Trasy zagnieżdżone dziedziczą meta po trasach nadrzędnych za pośrednictwem to.meta, które łączy wszystkie dopasowane rekordy. Trasa podrzędna widzi meta trasy nadrzędnej, chyba że zastąpi ten sam klucz.

Problem z typowaniem

Domyślnie TypeScript typuje meta jako pusty obiekt, dlatego to.meta.requiresAuth powoduje błąd. Problem ten należy rozwiązać za pomocą łączenia deklaracji z typami Vue Router.

Deklarowanie typowanego meta

Należy rozszerzyć interfejs RouteMeta z vue-router. Można umieścić tę deklarację w pliku .d.ts lub w dowolnym module zawierającym export {}.

import 'vue-router'

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

export {}

Meta jest teraz sprawdzane typami

Po rozszerzeniu deklaracji kompilator zna strukturę meta. Literówki, takie jak requireAuth, są wykrywane, a autouzupełnianie działa poprawnie.

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

Używanie meta w komponentach

Wewnątrz komponentu można odczytać meta bieżącej trasy za pomocą useRoute() — również z poprawnym typowaniem dzięki rozszerzeniu deklaracji.

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

Meta dla tytułów stron

Popularny wzorzec polega na zapisaniu title w meta i ustawieniu document.title z poziomu globalnego strażnika.

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

Szybki test

Proszę sprawdzić wiedzę na temat meta tras i typowania.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Pola meta tras przechowują dane właściwe dla poszczególnych tras:

Meta należy definiować w rekordach tras (requiresAuth, roles, title).
Należy odczytywać je w router.beforeEach, aby kontrolować nawigację.
Meta jest łączone od tras nadrzędnych do podrzędnych.
Należy je typować za pomocą łączenia deklaracji dla RouteMeta z vue-router.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Pola meta tras i typowanie” jest bezpłatna?

Tak — pełny tekst „Pola meta tras i typowanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pola meta tras i typowanie”?

meta: { requiresAuth: true }, scalanie deklaracji TypeScript w celu typowania meta. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Pola meta tras i typowanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy