Vue Academy · Pelajaran

Field Meta Rute dan Pengetikan

meta: { requiresAuth: true }, penggabungan deklarasi TypeScript untuk meta yang bertipe.

Pelajaran 1 dari 413 langkah

Field Meta Rute dan Pengetikan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Bidang Meta pada Route

Setiap route dapat membawa objek meta: data arbitrer yang dilampirkan pada route. Objek ini cocok untuk penanda seperti persyaratan autentikasi, peran yang diizinkan, judul halaman, atau pilihan tata letak.

Menambahkan Meta ke Route

Setel kunci meta pada catatan route. Nilainya sepenuhnya terserah Anda.

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

Membaca Meta dalam Penjaga

Penggunaan yang paling umum adalah dalam penjaga navigasi. router.beforeEach berjalan sebelum setiap navigasi dan menerima route tujuan, yang meta-nya dapat Anda periksa.

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

Mengarahkan Ulang Pengguna yang Belum Terautentikasi

Kembalikan lokasi route dari penjaga untuk mengarahkan ulang. Mengembalikan false membatalkan navigasi; tidak mengembalikan apa pun atau mengembalikan true akan mengizinkannya.

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

Akses Berbasis Peran

Gabungkan bidang meta roles dengan peran pengguna saat ini untuk membatasi akses ke halaman berdasarkan izin.

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

Meta Digabungkan dari Induk

Route bertingkat mewarisi meta dari induknya melalui to.meta, yang menggabungkan semua catatan yang cocok. Route anak melihat meta induknya, kecuali jika menimpa kunci yang sama.

Masalah Pengetikan

Secara bawaan, TypeScript mengetik meta sebagai objek kosong, sehingga to.meta.requiresAuth menghasilkan galat. Anda dapat memperbaikinya dengan penggabungan deklarasi terhadap tipe Vue Router.

Mendeklarasikan Meta Bertipe

Perluas antarmuka RouteMeta dari vue-router. Letakkan ini di dalam berkas .d.ts atau modul apa pun yang memiliki export {}.

import 'vue-router'

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

export {}

Sekarang Meta Diperiksa Tipenya

Setelah diperluas, kompiler mengetahui bentuk meta. Salah ketik seperti requireAuth akan terdeteksi, dan pelengkapan otomatis dapat digunakan.

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

Menggunakan Meta dalam Komponen

Di dalam komponen, Anda dapat membaca meta route saat ini melalui komposabel useRoute() — yang juga memiliki tipe berkat perluasan tersebut.

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

Meta untuk Judul Halaman

Pola yang umum adalah menyimpan title di dalam meta lalu menetapkan document.title dari penjaga global.

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

Uji Cepat

Uji pengetahuan Anda tentang meta route dan pengetikan.

Jawab di pelajaran interaktif

Ringkasan

Bidang meta pada route membawa data khusus untuk setiap route:

Tentukan meta pada catatan route (requiresAuth, roles, title).
Baca meta di router.beforeEach untuk menjaga navigasi.
Meta digabungkan dari route induk ke route anak.
Beri tipe menggunakan penggabungan deklarasi pada RouteMeta dari vue-router.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Field Meta Rute dan Pengetikan” gratis?

Ya — teks lengkap “Field Meta Rute dan Pengetikan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Field Meta Rute dan Pengetikan”?

meta: { requiresAuth: true }, penggabungan deklarasi TypeScript untuk meta yang bertipe. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Field Meta Rute dan Pengetikan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy