Vuejs Route Guard Kullanımı

Vuejs Route Guard ile Rotaları Koruma

Herkese merhabalar,bildiğim kadarıyla sizlere vue router ile beraber routelarımızı nasıl koruyacağımızı anlatmaya çalışacağım.

Route Guardları Niçin Kullanırız ?

Uygulamarımızda bazen bir sayfaya erişmek için örneğin kullanıcı sisteme giriş yapmadan belli bir içeriği göremesin yada yetkisi olmayan bir sayfaya erişim yapamasın gibi,(Örnekler çoğaltılabilir) işlemlerde kullanırız.

Proje Oluşturma

vue create router-app

ardından terminal ekranında npm run serve diyerek projeyi ayağa kaldırıyoruz

Vue-Router Kurulumu

npm install vue-router
# veya vue cli ile
vue add router

adımları izlenerek ilgili projeye router eklenir.

Aşağıdaki gibi bir kullanıcılar sayfamızın olduğunu varsayalım.

Router nasıl oluşturacağınızı bilmiyorsanız buraya tıklayarak router kullanımı yazımı okuyabilirsiniz.

<template>
    <div>
        Kullanıcılar
    </div>
</template>

<script>
    export default {
        name: "Kullanıcılar",
        beforeRouteLeave (to,from,next){
            //Sayfadaki değişiklikleri kayıt etmeden çıkmak istiyor musunuz ? 
            if(...){
                next()
            }else{
                next('...')
            }
        },

        beforeEnter(to, from, next) {
            console.log(to)
            console.log(from)
            next()
            //Kullanıcı yetki kontrolü yada kullanıcı sisteme giriş yapmasının kontrolğ
                 if (yetki === "admin" && girisyapildi === true) {
                      next(true)
                  } else {
                      next('Anasayfa')
                  }
        }
    }
</script>

Route guardlar birer middlewaredir.(to,from,next) şeklinde üç parametre alır.

to: Hedef url bilgilerini içerir.

from:Mevcut url bilgilerini içerir.

next: Bir fonksiyondur ve içersine aldığı parametreler next(),next(true/false) next(“Yönlenecek Sayfa Adı”).Boş bırakılır yada true parametresi girilirse ilgi rotaya yönlenme işlemi gerçekleşir,false değer girilirse ilgi rotaya yönlenmez,içerisine sayfa bilgisi girilirse ilgili sayfaya yönlenir.

beforeRouteLeave: Mevcut sayfadan ayrıldığımızda devreye giren fonksiyondur, örneğin bir sayfada ilgili verilerimizi forma doldurup kaydetmeden sayfadan ayrılmaya çalıştığımızda beforeRouteLeave fonksiyonunu tetikleyebilir ilgili formu kayıt edip etmediğine bakıp kullanıcıyı uyarabilir yada çeşitli işlemler yapabiliriz.

beforeEnter: İlgili sayfaya erişmek istediğimizde devreye giren fonksiyondur bu sayfada kullanıcı yetkilerini,kullanıcının sisteme giriş yapıp yapmadığını vb. gibi işlemleri yapabiliriz.

Router guardlar hakkında daha detaylı bilgi için resmi dökümantasyonu okuyabilirsiniz.

Herkese İyi Çalışmalar :)