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.

Demonun kaynak kodlarına ve codesandbox linkine aşağıdan ulaşabilirsiniz.

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.

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.

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.