React Router v6 ile Private Route yapılandırma
React router’un beta sürümünde oldukça köklü değişikliğe gidildi. Daha önce “reach/router” kullananlar için yeni versiyonda çok fazla yenilik olduğunu söyleyemem. Bu yazıda v6 sürümüyle nasıl korunaklı bir route yapısı oluşturabileceğimize hızlıca bakalım.
Tüm kullanıcıların erişebileceği bir sayfa ve sadece yetkisi bulunan kullanıcıların erişebileceği bir PrivateRoute tasarlayalım.
Bu örnek aşağıdaki senaryoları kapsar;
* Kullanıcı login olmadan, erişilmemesi gereken bir sayfaya erişemez.
* Kullanıcı login olduğu halde, yetkisinin olmadığı bir sayfaya erişmez.
* Kullanıcı login olmadan, token gerektiren bir servise istek atamaz.
Uygulama içerisinde iki rol tanımlı. “Admin” rolüne sahip kullanıcı tüm sayfalara erişebilir, “User” rolüne sahip kullanıcı “Users” sayfasına erişebilir.
pages/Home.tsx ← Login olmuş olmamış herkes erişebilir
pages/Dashboard.tsx ← Rolü “Admin” olan kullanıcılar erişebilir
pages/Users.tsx ← Rolü “User” veya “Admin” olan kullanıcılar erişebilir
pages/AccessDenied ← Login olmuş ama sayfaya erişim yetkisi bulunmayan kullanıcıların yönlendirileceği sayfa.
pages/NotFound ← Aranılan sayfa yoksa yönlendirecek sayfa.React router v6 ile PrivateRoute
Son satırda react-router’ın Route component’ine bir wrapper component yazdık. “{…rest}” prop’yla Route component’in halihazırda bulunan prop’larını PrivateRoute’a gönderiyoruz.
PrivateElement component’inde redux’da sakladığımız “isAuthenticated” değişkeniyle kullanıcının login olup olmadığını, “userHasRequiredRole” ile de kullanıcının bu sayfaya erişmek için yetkisi olup olmadığını kontrol ediyoruz. Eğer bu koşullar eşleşmiyorsa kullanıcıyı ana dizine “/” yönlendiriyoruz.
Oluşturduğumuz bu PrivateRoute component’ini artık aşağıdaki gibi Routes altında yapılandırabiliriz:
Son olarak “BrowserRouter” ile uygulamazı sarmallamayı unutmayın.
Ek olarak isteklerimizi yönetmek için “RTK Query” yapısı şu şekilde:
Eğer store’da halihazırda token varsa bunu isteğin header’ına ekliyoruz. Eğer kullanıcı login olmamışsa store’da token olmayacağı için korunaklı istekler back-end tarafından geri çevrilecek. (Back-end istekleri bu demoda msw.js kullanılarak mock olarak yapılandırıldı)
Son olarak login ve logout reducer’larına göz atalım:
Login isteği başarıyla tamamlanınca dönen bilgileri state’e eklerken, logout reducer’ysa state’i temizliyor.
Demo
Kaynaklar
1- https://github.com/akursat/react-router-example
2- https://github.com/remix-run/react-router/tree/v6.0.0-beta.4
3- https://redux-toolkit.js.org/