React’te Kullanıcıyı Tüm Sekmelerde Aynı Anda Çıkış Yapmaya Zorlamak
Bir web uygulaması geliştirirken, kullanıcıların tüm açık sekmelerde aynı anda oturumlarını kapatma ihtiyacı duyabileceğiniz durumlar olabilir. Bu, örneğin kullanıcı şifresini değiştirdiğinde veya güvenlik nedeniyle oturumlarını kapatmak istediğinde olabilir. Bu makalede, React’te bir kullanıcının tüm sekmelerde aynı anda oturumunu nasıl kapatabileceğinizi adım adım açıklayacağız.
Local Storage’ı Kullanarak Oturum Durumunu Yönetme
Bir kullanıcının tüm sekmelerde aynı anda oturumunu kapatabilmek için, oturum durumunu tüm sekmelerde senkronize etmemiz gerekir. Bunu yapmak için en etkili yöntemlerden biri, tarayıcı yerel depolama alanını (Local Storage) kullanmaktır. Yerel depolama alanı, tarayıcı tarafından sağlanan küçük bir veritabanıdır ve her sekme ve pencere arasında paylaşılabilir.
İlk olarak, uygulamanızda bir “oturum açık” değişkeni tanımlayarak başlayabilirsiniz. Bu değişken, kullanıcı oturum açtığında true ve oturum kapattığında false değerine ayarlanacaktır.
“`javascript
import React, { useState, useEffect } from ‘react’;
function App() {
const [isLoggedin, setIsLoggedin] = useState(false);
useEffect(() => {
// Yerel depolama alanından oturum durumunu alın
const storedIsLoggedin = localStorage.getItem(‘isLoggedIn’);
if (storedIsLoggedin) {
setIsLoggedin(JSON.parse(storedIsLoggedin));
}
}, []);
useEffect(() => {
// Yerel depolama alanına oturum durumunu kaydedin
localStorage.setItem(‘isLoggedIn’, JSON.stringify(isLoggedin));
}, [isLoggedin]);
const handleLogout = () => {
setIsLoggedin(false);
};
return (
) : (
)}
);
}
export default App;
“`
Bu kodda, yerel depolama alanından oturum durumunu alıyoruz ve bunu bir state değişkenine bağlıyoruz. Oturum durumunda değişiklik olduğunda, bu durum yerel depolama alanına da kaydediliyor. Bu sayede, tüm sekmelerde oturum durumu aynı anda güncelleniyor.
Oturum Kapatma İşlemini Tüm Sekmelere Yayma
Yerel depolama alanını kullandığınızda, her bir sekme bu depolama alanından güncellemeleri izleyebilir. Ancak, oturumu kapatma işleminden sonra, diğer tüm sekmelerin de bu güncellemeyi alabilmesini sağlamanız gerekir.
Bunun için, oturum kapatma işlemi gerçekleştiğinde, tarayıcıya bir mesaj göndereceğiz. Bu mesaj, diğer tüm sekmelerdeki oturum durumu değişkenini güncelleyecek.
“`javascript
const handleLogout = () => {
setIsLoggedin(false);
// Tüm sekmelere mesaj gönder
window.dispatchEvent(new Event(‘logout’));
};
“`
Diğer sekmelerde, bu mesajı dinleyip oturum durumunu güncelleyebiliriz.
“`javascript
useEffect(() => {
// Logout olayını dinle
window.addEventListener(‘logout’, () => {
setIsLoggedin(false);
});
return () => {
// Olay dinleyicisini kaldır
window.removeEventListener(‘logout’, () => {
setIsLoggedin(false);
});
};
}, []);
“`
Bu şekilde, bir sekmede oturum kapatma işlemi gerçekleştiğinde, diğer tüm sekmelerde de oturum durumu güncellenecek ve kullanıcı oturumunu kapatmış olacaktır.
Dikkat Edilmesi Gereken Noktalar
Kullanıcıların tüm sekmelerde aynı anda oturumunu kapatma özelliğini eklerken birkaç önemli noktayı göz önünde bulundurmanız gerekir:
- Kullanıcı deneyimi: Kullanıcıları beklenmedik şekilde oturumlarından çıkarmadan önce, uyarı mesajları veya onay kutuları göstererek onları bilgilendirmeniz önemlidir.
- Güvenlik: Güvenliği sağlamak için oturumları güvenli bir şekilde sonlandırmanız ve yetkisiz erişimi önlemek için token’ları geçersiz hale getirmeniz gerekir.
- Sık Kullanılan Durumlar: Bu özelliğin kullanılacağı en yaygın senaryoları (örneğin şifre değiştirme, güvenlik uyarısı, oturum süresi aşımı) belirleyerek daha kullanıcı dostu bir deneyim sağlayabilirsiniz.
Sonuç
Bu makalede, React uygulamalarında kullanıcıların tüm sekmelerde aynı anda oturumunu kapatmaya zorlama özelliğini nasıl uygulayacağınızı anlattık. Yerel depolama alanını ve tarayıcı mesajlaşmasını kullanarak, kullanıcı deneyimini etkilemeden oturum durumunu tüm sekmelere senkronize edebilirsiniz.
Daha fazla bilgi için, web sitemi ziyaret edebilirsiniz.
#Etiketler
React, Oturum Kapatma, Tüm Sekmeler, Local Storage, Tarayıcı Mesajlaşması, Güvenlik, Kullanıcı Deneyimi, Uygulama Geliştirme, Web Geliştirme