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.

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/

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
A. Kürşat Uzun

A. Kürşat Uzun

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

More from Medium

Reusable Combobox/Dropdown Component React (Compound pattern)

Private Routes With React Js — React -Router V6

Testing a React Component Library package locally, using Yarn and Craco

React Component Libraries

Form Handling in React JS Using React Hook Form Library