REACT ROUTING
React Router — 5 (Authentication -Private, Public Pages)
Bu yazıda React Router , elemanlarını uygulama ihtiyaçlarına göre extend ederek kullanma ihtiyacı duyabilirsiniz. Yani Authenticated kullanıcının görebileceği ekranlar, herkesin görebileceği ekranlar ve yönlendirmeler konusunu anlatacağım.
1. <Route> Auth, Not Auth ve Role Yetkilerinin Verilmesi
Her sayfadaki içeriğin görüntülenme durumu yetki durumlarına bağlı olabilir. Bu açıdan uygulamamızı incelediğimizde 3 tipte ekran olduğunu görebiliriz.
- Sadece Login olmuş kişilerin görebileceği sayfalar (Dashboard, Profile, Billing)
- Sadece Login olmamış kişilerin görebileceği sayfalar.(Landing, SignUp, Remember Me…)
- Hem Login olmuş hemde Login olmamış kişilerin görebileceği (About, Privacy vb…)
Bu durumun içerine birde Rolleri eklersek bu durumda (Dashboard, Profile veya Billing) sayfasında bile yetkiye göre Billing sayfasını veya bazı sayfaları göstermek istemediğimiz durumlar olabilir.
Bu durumda bizim route işlemi öncesinde bir takım akışları veya yönlendirmeleri manual kontrol edip ona göre yönlenmeyi engelleyip, başka istenilen bir sayfaya yönlendirme gerçekleştirebiliriz.
Örneğin;
- Login olmuş bir kişiyi Landing, SignUp, Login path gitmek istese bile Home sayfasına
- Login olmamış bir kişi Home sayfasına gitmek istese bile Landing sayfasına yönlendirmek istediğimizde
React Router 4,5 de function composition yöntemi ile bu sorunu basitçe çözebiliyoruz
//Common
<Route path="/about" component={About} />
<Route path="/privacy" component={Privacy} />//UnAuth
<UnAuthRoute path="/landing" component={Landing} />
<UnAuthRoute path="/signup" component={Signup} />
<UnAuthRoute path="/remember" component={Remember} />//Auth
<AuthRoute path='/home' component={Home} />
<AuthRoute path='/dashboard' component={Dashboard} />
Şimdi burada AuthRoute şeklide Route compose eden bir fonksiyon yazmamız gerekiyor. Bu fonksiyon öncesinde auth üzerinden kullanıcının sayfaya gitmeye yetkisi var mı şeklinde kontrol edecek ve duruma göre kullanıcıyı Login sayfasına yönlendirebilecektir.
Imperative ve Declarative
Yukarıdaki bir çok işlem Imperative veya Declarative yapılabilir. Özellikle React’ın yapısı altyapıda API olsada kullanıcıya daha declarative bir yaklaşım sunduğu için yukarıdaki kısmı nasıl farklı farkı yazılabileceğini göstermek istiyorum
Declarative --> <Component {...props} />
Imperative --> React.createElement(Component, props)
veya
Declarative --> <Redirect to="/login" />
Imperative --> history.push(login)
Acaba AuthRoute ‘da Declarative tanımlayabilir miyiz. Evet React-Router 6 dan itibaren Route içerisinde element verilebildiği için AuthRoute element çocuklarını alacak şekilde cover ederek çözebilirsiniz.
Şimdi tanımlarken AuthRoute direk Route içerisinde element olarak vermemiz gerekiyor. Bu sayede Dashboard renderlemeye çalıştığında öncesinde ilgili kişi Authenticated mı diye kontrol edip, eğer ki değilse Login sayfasına yönlendirecektir.
Yönlendirme Sırasında Geçmiş Path Saklanması
Diyelim ki kullanıcının bir şekilde token süresi bitmiş veya login olmadan iç sayfalara ulaşmaya çalıştı. Biz bu kişiyi login sayfasına yolluyoruz buraya kadar her şey tamam.
Peki Product Ekibi kullanıcının Login sayfasına gittiğinde şu sayfadan yönlendirildin şeklinde bir uyarı verilmesini istedi.
Bunu aşağıdaki gibi state içerisinde mevcut yönlendirilme ekranının path göndererek sağlayabiliriz.
2. <Prompt> Yönlenme İçin Onay Çubuğu
Şöyle bir senaryo olsun. Kullanıcı ekranların birisi içerisinde form ekranlarını doldurdu ama işlemini yarıda bırakacak başka sayfaya yönlenecek bir düğmeye bastı veya adres kutusuna aynı domainde baska bir adres girdi.
Bu durumda kullanıcının tüm verilerinin kaybolması ve istenmeyen bir durum oluşabilir.
Bunu önlemek için <Prompt> nesnesini kullanabilirsiniz.
Aşağıdaki örneği incelerseniz. Herhangi bir form edit olduğunda blocker devreye sokup ona göre Prompt aktif hale getirerek bu sorun çözebilirsiniz.
3. Dış linkten iç sayfaya yönlendirildiniz ama login değil iseniz sistem nasıl davranır ?
Bazen dış kaynaklardan (email, slack vb bildirimlerdeki) linkler ile herhangi bir dashboard, alert vb uygulama içi sisteme yönlendirilirsiniz.
Peki bu sırada Login değilseniz bu yönlendirme boşa mı gidecek ? Aşağıdaki adımlar ile işleyecek bir sistem kurarsanız boşa gitmez.
1nci Aşama kullanıcı aşağıdaki adresteki dashboard görmek istesin.
/dashboard/alarms/12
2nci Aşama bahsettiğim AuthRoute mekanizması kullanıcıyı karşılar ve kullanıcının redirection bilgisini kaydettikten sonra kullanıcıyı Login sayfasına yönlendirir.
LocalStorage.setItem("redirectAfterLogin", location.href)
history.push("/login")
3ncü aşama kullanıcı Login olduktan sonra kullanıcı Home sayfasına yönlendirilmeden önce LocalStorage yönlendirme ile ilgili bir komut kalıp kalmadığı kontrol edilir ve duruma göre direk ilgili sayfaya yönlendirilir.
const redirectPath=LocalStorage.get("redirectAfterLogin");
if(redirectPath) history.push(redirectPath)
4. Back Button (Geri Düğmesi) Gerçekleştirimi
Tarayıcının geri düğmesi dışında kendi geri düğmemizi oluşturmak isteyelim. Bu durumda yapmamız gereken öncelikle geriye gidebilme opsiyonumuz var mı diye history nesnesinden bilgi alacağız.
Aşağıdaki kodda Basit bir Geri(Back) düğmesi oluşturduk aynısını İleri düğmesi içinde gerçekleştirebilirsiniz.
function isBackEnabled() {
return props.history.length > 1;
}render() {
if (this.isBackEnabled()) {
return (
<>
<Button onClick={() => this.props.history.goBack()}/>
</>
);
} else {
return (
<>
<div></div>
</>
);
}
}
}
4. <Link> Aktif Durumu Kontrol Eden Şekilde Özelleştirme
Link objesini wrap edecek bir fonksiyon ile örneğin MatchLink → children, to ,exact parametrelerini kullanarak mevcut path karşılaştırma işlemleri yapabilirsiniz.
Veya bunun için direk useRouteMatch kullanarak React Router fonksiyonlarından faydalanabilirsiniz.
Bunun sonucunda karşımıza linklerin aktif durumlarını kendi kendine karar verebilen yapılar oluşturmuş oluruz ki bunları Sidebar ve Breadcrumb gibi yerlerde kullanmak oldukça kolay olacaktır.
Referanslar
- React da Sayfalar Arası Navigasyon
- Load Lazy When Routing
- Dynamic Page Routing
- URL Nedir ?
- URL API Nedir ?
- Browser API Nedir?
- Her Ortamda Çalışan Web Uygulamaları Geliştirme (URL Kullanımı)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React Router) erişmek için bu linke tıklayabilirsiniz.