React Hooks Login, Context Api ve Protected Route İle

Ebru Gulec
Jul 21 · 2 min read

React ile verileri bir component’dan diğerine aktarmak bazen ciddi anlamda problem olabiliyor. Örneğin main componentdaki bir state’i kullanmak için component tree’deki her levelden bu veriyi geçirmemiz gerekiyor. Ve bu gereksiz iş yükü demek. Bu gibi ihtiyaçlardan ötürü redux gibi harici kütüphaneler kullanılabiliyor. Temelde de aynı şeyi yapıyorlar aslında. Bir global state tanımlayıp onu veriye ihtiyacımız olduğu yerde çağırıp kullanıyorlar. Bu yazıdaki amaç context ve redux’i karılaştırmak değil çünkü ikisine de tam olarak hakim değilim. Mutlaka artıları ve eksileri vardır birbirlerine ancak ben context kullanmayı daha çok sevdim galiba. Bunu bir türlü düzgünce redux’i öğrenmediğimden de yanlı bir tavır olduğunu belirtmeliyim.

Konumuza geri dönecek olursak bu yazıda anlatacağım şey context ise basit bir login işlemini nasıl gerçekleştirdiğimiz.

Öncelikle ben bütün context işlemlerini AuthContext.js de tutuyorum.

Bu dosyada ilk olarak context’i kullanacağımızı ‘createContext’ ile belirtiyoruz. Ardından isAuth state’imizi oluşturuyoruz. İlk değerini belirlemek için ise local storage’e bakıyoruz. local storage’de credentials değeri varsa statetin ilk değeri true oluyor. Buradaki provider ve consumer’i en basit şekli ile açıklayacak olursam; Provider veriyi bize veren taraf, Consumer ise onun kullanan taraf olarak özetlenebilir.

<AuthContext.Provider value={{ isAuth, updateIsAuth: value => setIsAuth(value) }}>

ile bir wrapper oluşturduk. Bir nevi

{ props.children } ile

gelen componentlarımızda istediğimiz değerleri göndermek için.(updateIsAuth kısmını neden kullandığımı yazının devamında açıklayacağım.) Sonrasında hem veri sağlayıcı tarafı(AuthProvider) hem de istemci tarafı(AuthConsumer) istediğimiz yerde kullanabilmek için export ettik. Contex yapımız temelde oluştu. Şimdi bu component’i bütün componentları saracak şekilde kullanabiliriz. Ben her yerde sürekli AuthProvider’i yazmamak için projenin başlangıcını, yani index component’ımı bu provider ile sardım.

Şimdi de bir route yapısı oluşturabiliriz.

Route yapımızda isAuth değerine ihtiyacımız olan her component’i ProtectedRoute component’i ile kontrol ediyoruz.

ProtectedRoute componentimızda Consumer’i öncelikle import ediyoruz. Ardından her gelen component için isAuth değeri true mu diye bakıyoruz. Eğer true ise propsları ile birlikte component’i yönlendiriyoruz.

Temel olarak context api ile sigin işlemini gerçekleştirdik ancak küçük bir şey daha yapmamız gerekli. Kullanıcı Login butonuna tıkladığında ilk gelen ‘isAuth’ değeri false olacak. Ve bilgiler doğru olsa bile ‘Dasboard’ sayfasına yönlenemeyeceğiz ilk seferinde. Bu problemi çözmek için AuthContext’de updateIsAuth fonksiyonunu da göndermiştik. Şimdi bu fonksiyonu login yaptığımız yerde set edelim.

Böylece context kullanarak login işlemimizi gerçekleştirdik.

⚠️ Yazıda herhangi bir hata bulursanız ya da eksik olduğunu düşündüğünüz bir yer olursa lütfen belirtin. Bu hem benim yanlış öğrendiğim bir şeyi düzeltmemi sağlar hem de bunu okuyanları yanlış bilgilendirmiş olmam. Şimdiden teşekkürler.

Sevgiler.

Ebru Gulec

Written by

artist www.ebrugulec.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade