ReactJS’de Protected Routes Kullanımı

Herkese merhabalar öncelikle Protected Routes a neden ihtiyaç duyarız bunu anlatayım bazı kullanıcıların erişebileceği özel sayfalar tasarlarız mesela dashboard gibi bu sayfalara sadece kayıtlı kullanıcıların erişmemesini isteriz ya da bir ön koşul belirtiriz bu koşul kullanıcı rolü olabilir sadece admin rolüne sahip kişilerin görüntüleyebilmesini sağlarız. Genel olarak kullanım mantığı bu şekildedir.

Uygulamada görerek anlamanız daha da iyi olacaktır deyip uygulamanın senaryosunda bahsedeyim. Home, Product ve Dashboard isminde sayfalarımız var eğer kullanıcı giriş yapmamışsa kullanıcının Dashboard sayfasını erişmesini engellediğimiz bir yapı olmasını istiyoruz.

Hadi başlayalım öncelikle protected routes isminde bir react uygulaması oluşturdum.

npx create-react-app protected-routes

Daha sonras src altında pages klasörü oluşturuyorum bu klasör içerisine Home , Product ve Dashboard ve Error404 sayfalarımı oluşturuyorum. Error404 sayfası oluşturmamın sebebi bulunmayan bir adres girildiğinde dönecek olan hata mesajınız içermesi içindir. Daha sonra components klasörü oluşturup altında Navbar oluşturuyorum. Sayfa içerikleri olarak İsimlerini yazabilirsiniz asıl amacım protected routes tanımı anlatmak olduğu için buraları kısaca geçiyorum.

Oluşturduğum react projesinin içerisindeki app.js e geliyorum ve router yapısını oluşturmaya başlıyorum. React Router DOM paketini indirmeniz gerekiyor bunun için aşağıdaki komutu terminalinize yazabilirsiniz.

npm i react-router-dom

Daha sonra import edelim.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Son sürümü kullandığımız için v5 e göre bazı yenilikler bulunmaktadır. Bununla birlikte Protected Router kullanımı da farklılık gösterebilir bu uygulamadaki bütün işlemler son sürüme göre yapılmıştır.

Router yapımız aşağıdaki gibidir.

Burada Router içerisinde 5 Route bulunmaktadır bunlar Home, Product, Dashboard, Error404 ve Dashboard sayfalarıdır. Home ve Product sayfası dışarıdan herkesin görüntüleyebileceği sayfalardır.

Ve gelelim buradaki ProtectedRoutes yapımıza Dashboard route’nu Protected Route elementinin bulunduğu route’nun içerisinde alıyoruz böylece Protected Router içerisindeki işlemlere göre Dashboard sayfasını kullanabileceğiz. Peki Protected Router sayfasında ne yapıyoruz.

ProtectedRoutes isminde bir klasör oluşturup içerisinde index.js oluşturuyorum. Burada AuthContext adında bir context yapım mevcut context içerisinde state olarak tuttuğum user bilgisin alıyorum. Eğer user varsa yani true ise Dashboardu göstermesi için Outlet bileşenini kullanıyoruz eğer user yok ise yani false Navigate yaparak anasayfaya yönlendiriyorum.

AuthContext yapımda şu şekilde anlaşılacağı üzere de statete bulunan user bilgimi gönderiyorum. User bilgisini navbar üzerindeki login ve logout buttonları ile değiştiriyorum.

Bütün kodları github reposu olarak bir araya getirdim github üzerinden de ulaşabilirsiniz. repo

linki üzerinden canlı olarak görüntüleyebilir ve deneme yapabilirsiniz.

React App

Sonuç olarak react router dom ve Protected Routes yapısından bahsetmiş olduk okuduğunuz için teşekkürler.

Alkışlayıp takip ederseniz sevinirim. :)