Vue Academy · Ders

Gezinme Korumaları

Route'ları koruyun ve korumalarla gezinme sırasında mantık çalıştırın.

Gezinme Korumaları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Gezinme Korumaları Nedir?

Gezinme korumaları, bir yönlendirme değişikliğinden önce, değişiklik sırasında veya değişiklikten sonra kod çalıştırmanızı sağlar.

Gezinmeyi engeller veya başka yere yönlendirir
Kimlik doğrulamasını denetler
Bir sayfadan ayrılmadan önce onay alır

Koruma Türleri

Üç koruma düzeyi vardır:

Genel korumalar her gezinmede çalışır
Yönlendirme başına korumalar belirli bir yönlendirme için çalışır
Bileşen içi korumalar bir bileşenin içinde çalışır

beforeEach Genel Koruması

router.beforeEach her gezinmeden önce çalışır. Hedef ve geçerli yönlendirmeleri alır.

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

İzin Verme veya Başka Yere Yönlendirme

Vue Router 4'te akışı denetlemek için bir değer döndürün.

İzin vermek için true veya hiçbir şey döndürmeyin
İptal etmek için false döndürün
Başka yere yönlendirmek için bir yönlendirme konumu döndürün

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

Yönlendirme Meta Alanları

Yönlendirmelere requiresAuth gibi özel meta verileri ekleyin ve bunları korumalarda okuyun.

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

Kimlik Doğrulama Koruması

Yaygın bir yaklaşım, genel bir korumada kimlik doğrulamasını denetleyerek yönlendirmeleri korumaktır.

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

Yönlendirme Başına beforeEnter

beforeEnter, doğrudan tanımında tek bir yönlendirmeyi korur.

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

Bileşen İçi Korumalar

Bileşenler kendi korumalarını tanımlayabilir. onBeforeRouteLeave, başka bir yere gezinirken çalışır.

import { onBeforeRouteLeave } from "vue-router"

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

onBeforeRouteUpdate

onBeforeRouteUpdate, yönlendirme değiştiğinde ancak aynı bileşen yeniden kullanıldığında (parametre değişikliğinde) çalışır.

import { onBeforeRouteUpdate } from "vue-router"

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

next Geri Çağrısı (Klasik Stil)

Daha eski kodlar, gezinmeyi denetlemek için üçüncü bir bağımsız değişken olan next değerini kullanır. Günümüzde bir değer döndürmek tercih edilir.

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

Döndürülen Değer ile next() Karşılaştırması

İki stilin amacı aynıdır:

Bir değer döndürme (modern, daha temiz): true, false veya bir konum
next() çağırma (klasik): devam etme veya başka yere yönlendirme

Aynı koruma içinde bu stilleri birlikte kullanmayın. Yeni kodlar için değer döndürme stili önerilir.

Hızlı Kontrol

Gezinme korumaları hakkındaki anlayışınızı sınayın.

Özet: Gezinme Korumaları

Gezinmeyi denetlemeyi öğrendiniz:

beforeEach genel koruması her yönlendirme için çalışır
İzin vermek için true, iptal etmek için false, başka yere yönlendirmek için bir konum döndürün
requiresAuth gibi meta alanları kimlik doğrulama denetimlerini yönlendirir
beforeEnter tek bir yönlendirmeyi korur
onBeforeRouteLeave gibi bileşen içi korumalar ayrılma işlemini yönetir

Temel Vue.js kursunu tamamladınız!

Sıkça Sorulan Sorular

“Gezinme Korumaları” dersi ücretsiz mi?

Evet — “Gezinme Korumaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Gezinme Korumaları” dersinde ne öğreneceğim?

Route'ları koruyun ve korumalarla gezinme sırasında mantık çalıştırın. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Gezinme Korumaları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön