Kimlik doğrulama, yazılım uygulamaları için koruyucu bir engel görevi görerek kullanıcıların kimliğini doğrular ve korunan kaynaklara erişim sağlar. Ancak, kullanıcıların özellikle tek bir oturumda tekrar tekrar kimlik doğrulaması yapmalarını istemek hayal kırıklığına yol açabilir, üretkenliği engelleyebilir ve genel deneyimlerini mahvedebilir.

Bu zorluğun üstesinden gelmek için, kullanıcı kimlik doğrulama verilerini ve diğer kişiselleştirilmiş bilgileri kalıcı kılmak için tanımlama bilgilerini ve oturum depolamayı kullanabilirsiniz. bilgi—kullanıcıların sürekli olarak yeniden kimlik doğrulamaya ihtiyaç duymadan bir oturum boyunca kimliğinin doğrulanmış olarak kalmasına izin vererek, sonuç olarak, iyileştirme onların deneyimi.

Tanımlama Bilgileri ve Oturum Depolama Kullanarak Kullanıcı Oturumu Verilerini Yönetme

Kullanıcı oturumu yönetimi, sağlam ve güvenli React uygulamaları oluşturmanın çok önemli bir yönüdür. Çerezleri ve oturum depolamayı kullanarak oturum verilerini düzgün bir şekilde yönetmek, gerekli güvenlik önlemlerini korurken sorunsuz ve kişiselleştirilmiş bir kullanıcı deneyimi sağlar.

Kullanıcı oturumu verileri, genellikle bir kullanıcının mevcut oturumuna veya bir uygulamayla etkileşimine özgü bilgileri içerir. Bu veriler, uygulamanın gereksinimlerine ve işlevlerine bağlı olarak değişebilir ancak genel olarak aşağıdakileri içerir:

• Kimlik doğrulamayla ilgili bilgiler.
• Kullanıcı tercihleri ​​ve ayarları.
• Kullanıcı etkinliği ve geçmişi.

Çerezler, küçük veri parçaları içeren metin dosyalarıdır. kullanıcının cihazında web tarayıcıları tarafından saklanır. Kimlik doğrulama verilerini ve diğer kişiselleştirilmiş kullanıcı bilgilerini depolamak için yaygın olarak kullanılırlar ve web uygulamalarının birden çok tarayıcı oturumunda kullanıcı oturumlarını sürdürmesine izin verirler.

Diğer taraftan, oturum depolaması—yerel depolamaya benzer— modern tarayıcılar tarafından sağlanan istemci tarafı bir depolama mekanizmasıdır. Tanımlama bilgilerinin aksine, belirli bir tarama oturumuyla sınırlıdır ve yalnızca aynı sekme veya pencereden erişilebilir. Oturum depolama, web uygulamaları için oturuma özgü verileri depolamanın basit ve anlaşılır bir yolunu sunar.

Hem tanımlama bilgileri hem de oturum depolaması, kullanıcı oturumu verilerinin yönetilmesinde önemli roller oynar. Tanımlama bilgileri, birden çok oturumda veri kalıcılığının gerekli olduğu durumlarda harikadır. Buna karşılık, oturum depolama, verileri tek bir göz atma oturumunda izole etmek istediğinizde avantajlıdır ve hafif ve özel bir depolama seçeneği sunar.

Şimdi, özellikle tanımlama bilgilerini ve oturum depolamayı kullanarak kimlik doğrulama bilgilerini depolamaya odaklanarak, kullanıcı oturumu verilerinin nasıl işleneceğini keşfedelim.

Bir React Projesi Kurun

Başlamak, Vite kullanarak bir React projesi oluşturun. Ardından, bu paketleri projenize kurun.

npm install js-cookie tepki-yönlendirici-dom

İdeal olarak, bir kullanıcı oturum açtıktan ve kimlik bilgileri bir arka uç kimlik doğrulama API'si tarafından başarıyla doğrulandıktan sonra, tanımlama bilgileri ve oturum depolaması, kimlik doğrulama belirteçlerini, oturum tanımlayıcılarını veya kullanıcının oturum.

Bu belirteçler veya tanımlayıcılar, kullanıcının tarayıcısında depolanan ek verilerle birlikte otomatik olarak bir kullanıcının korumalı erişime erişmesinden önce doğrulama için sunucuya yapılan müteakip isteklere dahil edilir kaynaklar.

Bu şekilde, bir kullanıcının oturumu birden çok istekte devam eder ve her istek için yeniden kimlik doğrulaması yapılmasına gerek kalmadan uygulamayla sorunsuz bir şekilde etkileşime girmelerini sağlar.

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

Tanımlama Bilgileri Kullanarak Kullanıcı Kimlik Doğrulama Oturumu Verilerini Yönetme

Kullanıcıların kimlik doğrulama bilgilerini saklamak için çerezlerin nasıl kullanılacağını göstermek için devam edin ve yeni bir tane oluşturun. bileşenler/Login.jsx dosya kaynak dizin. Bu dosyanın içine aşağıdaki kodu ekleyin.

1. Aşağıdaki içe aktarmaları yapın.

   içe aktarmak { kullanımDevlet } itibaren'tepki';
   içe aktarmak {Navigate'i kullan} itibaren'tepki-yönlendirici-dom';
   içe aktarmak Kurabiye itibaren'js-çerez';

2. İşlevsel bir bileşen oluşturun ve oturum açma formu için JSX öğeleri ekleyin.

   sabit Giriş = () => {
   sabit [kullanıcı adı, setUsername] = useState('');
   sabit [şifre, setPassword] = useState('');
   geri dönmek (
   
   
   
    tür="metin"
    yer tutucu="Kullanıcı adı"
    değer={kullanıcı adı}
    onChange={(e) => setUsername (e.target.value)}
    />
    tür="şifre"
    yer tutucu="Şifre"
    değer={şifre}
    onChange={(e) => setPassword (e.target.value)}
    />
   "göndermek">Giriş</button>
    </form>
    );
   };
   ihracatvarsayılan Giriş yapmak;

Kullanıcı kimlik bilgilerini doğrulamak için bir arka uç API'miz olmadığı için, test kullanıcısı kimlik bilgilerini kullanarak kullanıcı tarafından oturum açma formuna girilen verileri doğrulayan bir işlev oluşturacağız. İşlevsel bileşenin içine aşağıdaki kodu ekleyin.

sabit testAuthData = {
 Kullanıcı adı: 'Ölçek',
 şifre: 'Ölçek',
 }; 
sabit kimlik doğrulama Kullanıcısı = (Kullanıcı adı Şifre) => {
eğer (kullanıcı adı testAuthData.username && şifre testAuthData.password) { 
sabit kullanıcı Verileri = {
 Kullanıcı adı,
 şifre,
 };
sabit sona erme süresi = yeniTarih(yeniTarih().getTime() + 60000);
 Çerezler.set("yetki", JSON.stringify (kullanıcıVerileri), { süresi doluyor: sona erme Süresi });
geri dönmekdoğru;
 }
geri dönmekYANLIŞ;
 };
sabit tutamaçGiriş = (e) => {
 e.preventDefault();
sabit isAuthenticated = AuthenticateUser (kullanıcı adı, şifre);
eğer (Kimliği Doğrulanmış) {
 gezinmek('/korumalı');
 } başka {
// Başarısız kimlik doğrulaması için hata mesajı göster veya başka eylemler gerçekleştir
 }
 };

İçinde kimlik doğrulamasıKullanıcı işlevi, sağlanan kullanıcı adı ve parolanın test kimlik doğrulama verileriyle eşleşip eşleşmediğini kontrol eder. Kimlik bilgileri eşleşirse, bir Kullanıcı bilgisi kullanıcı adı ve şifre ile nesne. Daha sonra tanımlama bilgisi için bir son kullanma süresi belirler ve Kullanıcı bilgisi adlı bir çerezde yetki kullanmak Çerezler.set yöntem.

Başarılı kimlik doğrulamasından sonra, korumalı kaynaklara erişim yetkisine sahip olduğu için kullanıcı korumalı bir sayfaya yönlendirilir. Kimlik doğrulama bilgilerini bir tanımlama bilgisinde saklayarak, sonraki isteklerin kimlik doğrulama ayrıntılarını otomatik olarak içermesine izin veren etkin bir kullanıcı oturumu oluşturursunuz.

Bu kullanıcı oturumu verileri, sunucu kodunun kullanıcının kimliğini doğrulamasına ve kullanıcının her istek için yeniden kimlik doğrulaması yapmasına gerek kalmadan ayrıcalıklara erişim yetkisi vermesine olanak tanır.

App.jsx Dosyasını Güncelleyin

üzerinde değişiklik yapma Uygulama.jsx başarılı kimlik doğrulamasından sonra kullanıcı yönlendirmesini işlemek için dosya

içe aktarmak { BrowserRouter, Route, Routes, useNavigate } itibaren'tepki-yönlendirici-dom';
içe aktarmak Kurabiye itibaren'js-çerez';
içe aktarmak Giriş yapmak itibaren'./bileşenler/Giriş';
sabit Korumalı Sayfa = ({ ...dinlenmek }) => {
sabit isAuthenticated = !!Çerezler.get("yetki");
sabit navigasyon = useNavigate();
sabit tutamaçÇıkış = () => { 
 Çerezler.kaldır("yetki");
 gezinmek('/giriş yapmak'); 
 };
eğer (!isAuthenticated) {
 gezinmek('/giriş yapmak'); 
geri dönmekhükümsüz; // Başka bir şeyin işlenmesini önlemek için null döndürün
 }
geri dönmek (



yazı Boyutu: "24 piksel", renk: 'mavi' }}>Merhaba Dünya!</h1>
marjinÜst: "10 piksel" }} onClick={handleLogout}>
 Çıkış Yap
 </button>
 </div>
 );
};


sabit uygulama = () => {
geri dönmek (


"/korumalı/*" eleman={} />
"/giriş yapmak" eleman={} />
 </Routes>
 </BrowserRouter>
 );
};
ihracatvarsayılan Uygulama;

Yukarıdaki kod, gerekli bileşenleri ve yönlendirme mantığını kurar. Basıldığında kimlik doğrulama tanımlama bilgisini silen ve kullanıcıyı oturum açma sayfasına yönlendiren bir oturum kapatma düğmesi içerir.

Ek olarak, kimlik doğrulama tanımlama bilgisinin varlığını doğrular ve yoksa kullanıcıları oturum açma sayfasına yönlendirir. Ancak çerez varsa, Korumalı Sayfa bileşeni, yalnızca kimliği doğrulanmış kullanıcıların erişebileceği bir sayfa oluşturur.

Son olarak, uygulamayı test etmek üzere geliştirme sunucusunu döndürmek için aşağıdaki komutu çalıştırın.

npm geliştiriciyi çalıştır

Tarayıcınızda şuraya gidin: http://127.0.0.1:5173/loginve test kimlik doğrulama bilgilerini girin. Başarılı bir şekilde oturum açtıktan sonra, test kimlik doğrulama bilgilerini içeren oturum verilerini içeren yeni bir tanımlama bilgisi oluşturulur.

Çerezin süresi dolduğunda veya çıkış düğmesine tıkladığınızda çerez silinir. Bu eylem, etkin kullanıcı oturumunu etkili bir şekilde sonlandırır ve oturumunuzu kapatır.

Oturum Depolamayı Kullanarak Kullanıcı Kimlik Doğrulama Verilerini Depolama

Hem oturum depolaması hem de tanımlama bilgileri benzer şekilde çalışır. Gerekli bilgileri tarayıcının oturum deposunda saklamak için, sessionStorage.setItem yöntem.

 sessionStorage.setItem("yetki", JSON.stringify (kullanıcı Verileri));

Yukarıdaki ifadeyi içine ekleyerek kimlik doğrulamasıKullanıcı işlevi Giriş yapmak bileşen, kullanıcının kimlik doğrulama verilerini tarayıcının oturum deposunda saklayabilirsiniz.

Tanımlama Bilgileri ve Oturum Depolama için Ek Kullanım Durumlarını Keşfetme

Bu kılavuz, kullanıcıların kimlik doğrulama bilgilerini saklamak için çerezlerin ve oturum depolamanın nasıl kullanılacağını vurgulamaktadır. Bununla birlikte, tanımlama bilgileri ve oturum depolama, kimlik doğrulama bilgilerini depolamanın ötesinde daha geniş bir yetenek yelpazesi sunar.

Bu özelliklerden yararlanarak, daha güvenli ve kişiselleştirilmiş bir kullanıcı deneyimi sağlayan ek oturum verilerini yönetebilirsiniz.