Genellikle, web uygulamaları oluştururken, özel sayfaları korumak için oturum açma sayfaları kullanılır. Örneğin, bir blog platformu için gösterge panosuna yalnızca kimliği doğrulanmış kullanıcılar erişebilir. Kimliği doğrulanmamış bir kullanıcı o sayfaya erişmeye çalışırsa, uygulama onları oturum açma sayfasına yönlendirir. Giriş yaptıktan sonra erişim sağlarlar.
Bu yazıda, bir kullanıcıyı kısıtlı bir sayfadan bir giriş sayfasına nasıl yönlendirebileceğinizi inceleyeceğiz. Ayrıca, oturum açtıktan sonra kullanıcıyı bulundukları sayfaya nasıl geri döndürebileceğinizi de tartışacağız.
React Router v6'da bir kullanıcıyı yeniden yönlendirmek için kullanabileceğiniz iki yol vardır: Navigate bileşeni ve kullanNavigate() kanca.
Bir React Uygulaması Oluşturun
kullanarak basit bir React uygulaması oluşturun. oluştur-tepki-uygulaması emretmek. Navigate bileşeninin nasıl çalıştığını test etmek için bu uygulamayı kullanacaksınız. kullanNavigate() kanca işi.
npx oluşturmak-react-app tepki-yönlendirme
Giriş Sayfası Oluştur
Kullanıcıların kimliğini doğrulamak için bir Giriş sayfası oluşturmanız gerekecek. Bu bir kimlik doğrulama öğreticisi olmadığından, kullanıcı veritabanı olarak bir dizi nesne kullanın.
içinde yeni bir dosya oluşturun. kaynak klasör ve adlandırın Login.js. Ardından aşağıdaki kodu ekleyin, giriş formu oluştur.
içe aktarmak { useState } itibaren "tepki";
içe aktarmak Gösterge Paneli itibaren "./Gösterge Paneli";
const Giriş = () => {
const [kullanıcı adı, setusername] = useState("");
const [parola, setpassword] = useState("");
const [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| yanlış));
const users = [{ kullanıcı adı: "Jane", şifre: "test şifresi" }];
const handleSubmit = (e) => {
e.preventDefault()
const hesap = users.find((user) => user.username kullanıcı adı);
eğer (hesap && hesap.şifre şifresi) {
kimliği doğrulanmış(doğru)
localStorage.setItem("kimliği doğrulanmış", doğru);
}
};
dönüş (
<div>
<p>Tekrar hoşgeldiniz</p>
<form onSubmit={handleSubmit}>
<giriş
tip="Metin"
isim="Kullanıcı adı"
değer={kullanıcı adı}
onChange={(e) => setusername (e.target.value)}
/>
<giriş
tip="şifre"
isim="Şifre"
onChange={(e) => setpassword (e.target.value)}
/>
<giriş türü="Sunmak" değer="Göndermek" />
</form>
</div>
)
};
}
ihracatvarsayılan Giriş yapmak;
Bu basit bir giriş formudur. Bir kullanıcı kullanıcı adını ve şifresini gönderdiğinde diziye göre kontrol edilir. Bu ayrıntılar doğruysa, kimliği doğrulanmış durum olarak ayarlanır. doğru. Dashboard bileşeninde kullanıcının kimliğinin doğrulanıp doğrulanmadığını kontrol edeceğiniz için, kimlik doğrulama durumunu diğer bileşenlerin erişebileceği bir yerde saklamanız da gerekir. Bu makale yerel depolama kullanır. Gerçek bir uygulamada, kullanarak Tepki bağlamı daha iyi bir seçim olur.
Pano Sayfası Oluşturun
adlı yeni bir dosyaya aşağıdaki kodu ekleyin. Dashboard.js.
const Gösterge Tablosu = () => {
dönüş (
<div>
<p>Kontrol Panelinize hoş geldiniz</p>
</div>
);
};
ihracatvarsayılan Gösterge Paneli;
Gösterge tablosuna yalnızca kimliği doğrulanmış kullanıcılar erişebilmelidir. Bu nedenle, kullanıcılar kontrol paneli sayfasını ziyaret ettiğinde, önce kimliklerinin doğrulanıp doğrulanmadığını kontrol edin. Değillerse, onları giriş sayfasına yönlendirin.
Bunu yapmak için önce React yönlendiriciyi kullanarak uygulama rotalarını ayarlayın.
npm Yüklemek tepki-yönlendirici-dom
index.js'de uygulamanız için yönlendirmeyi ayarlayın.
içe aktarmak Tepki itibaren "tepki";
içe aktarmak ReactDOM itibaren "tepki-dom/istemci";
içe aktarmak Uygulama itibaren "./Uygulama";
içe aktarmak { BrowserRouter, Rota, Rotalar } itibaren "tepki-yönlendirici-dom";
içe aktarmak Giriş yapmak itibaren "./Giriş yapmak";
içe aktarmak Gösterge Paneli itibaren "./Gösterge Paneli";
const root = ReactDOM.createRoot(belge.getElementById("kök"));
kök.render(
<Tepki. KatıMod>
<TarayıcıYönlendirici>
<Rotalar>
<Rota dizin öğesi={<Uygulama />} />
<Rota yolu="giriş yapmak" eleman={<Giriş yapmak />} />
<Rota yolu="Gösterge Paneli" eleman={<Gösterge Paneli />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Gösterge Tablosu Sayfasını Koruyun
Artık uygulama rotalarınız ayarlandığına göre, bir sonraki adım pano rotasını özel yap. Pano bileşeni yüklendiğinde, kimlik doğrulama durumu yerel depolamadan alınır ve durumda saklanır. Kullanıcının kimliği doğrulanmazsa, uygulama oturum açma sayfasına yönlendirilir, aksi takdirde gösterge tablosu sayfasını görüntüler.
içe aktarmak { useEffect, useState } itibaren "tepki";
const Gösterge Tablosu = () => {
const [kimliği doğrulanmış, kimliği doğrulanmış] = useState(hükümsüz);
useEffect(() => {
const logInUser = localStorage.getItem("kimliği doğrulanmış");
if (loggedInUser) {
kimliği doğrulanmış (loggedInUser);
}
}, []);
if (!authenticated) {
// Yönlendirme
} başka {
dönüş (
<div>
<p>Kontrol Panelinize hoş geldiniz</p>
</div>
);
}
};
ihracatvarsayılan Gösterge Paneli;
Kullanıcıyı Gezinmeyi Kullanarak Giriş Sayfasına Yönlendirin
Navigate bileşeni, React Router v5'te kullanılan Redirect bileşeninin yerini aldı. İthalat React-router-dom'dan navigasyon yapın.
içe aktarmak { Gezin } itibaren "tepki-yönlendirici-dom";
Kimliği doğrulanmamış kullanıcıları yeniden yönlendirmek için aşağıdaki gibi kullanın.
if (!authenticated) {
dönüş <Şuraya git: değiştir"/login" />;
} başka {
dönüş (
<div>
<p>Kontrol Panelinize hoş geldiniz</p>
</div>
);
}
Gezinme bileşeni, bildirim temelli bir API'dir. Bu durumda bir durum değişikliğine neden olmak ve dolayısıyla bir bileşenin yeniden oluşturulmasına neden olmak için kimlik doğrulama olan bir kullanıcı olayına dayanır. replace anahtar sözcüğünü kullanmanız gerekmediğini unutmayın. Bunu kullanmak, tarayıcının geçmişine göndermek yerine mevcut URL'yi değiştirir.
useNavigate() Kullanarak Kullanıcıyı Başka Bir Sayfaya Yönlendirin
React'te yönlendirmeler gerçekleştirmek için diğer seçenek, kullanNavigate() kanca. Bu kanca, gezinme zorunlu API'sine erişim sağlar. Reaksiyon-yönlendirici-dom'dan içe aktararak başlayın.
içe aktarmak { useNavigate } itibaren "tepki-yönlendirici-dom";
Kullanıcının kimliği başarıyla doğrulandıktan sonra yeniden yönlendirin. tutamakGönder() şu şekilde işlev görür:
const gezinmek = useNavigate();
const Giriş = () => {
const gezinmek = useNavigate();
const [kullanıcı adı, setusername] = useState("");
const [parola, setpassword] = useState("");
const [kimliği doğrulanmış, kimliği doğrulanmış] = useState(
localStorage.getItem (localStorage.getItem("kimliği doğrulanmış") || yanlış)
);
const users = [{ kullanıcı adı: "Jane", şifre: "test şifresi" }];
const handleSubmit = (e) => {
e.preventDefault();
const hesap = users.find((user) => user.username kullanıcı adı);
eğer (hesap && hesap.şifre şifresi) {
localStorage.setItem("kimliği doğrulanmış", doğru);
gezinmek("/dashboard");
}
};
dönüş (
<div>
<form onSubmit={handleSubmit}>
<giriş
tip="Metin"
isim="Kullanıcı adı"
değer={kullanıcı adı}
onChange={(e) => setusername (e.target.value)}
/>
<giriş
tip="şifre"
isim="Şifre"
onChange={(e) => setpassword (e.target.value)}
/>
<giriş türü="Sunmak" değer="Göndermek" />
</form>
</div>
);
};
Bu örnekte, kullanıcı formu doğru ayrıntılarla gönderdiğinde gösterge panosuna yönlendirilir.
Uygulamaları oluştururken hedeflerden biri kullanıcılara en iyi deneyimi sunmaktır. Bunu, kullanıcıyı giriş sayfasına yönlendirerek önceki sayfaya geri götürerek yapabilirsiniz. Bu şekilde gezinmek için -1'i geçerek bunu yapabilirsiniz, gezinmek(-1). Tarayıcınızdaki geri düğmesine basmakla aynı şekilde hareket eder.
React'te Yönlendirme
Bu makalede, hem Navigate bileşenini hem de React'te bir kullanıcıyı başka bir sayfaya nasıl yönlendirebileceğinizi öğrendiniz. kullanNavigate() kanca. Makale, kimliği doğrulanmamış kullanıcıları korumalı bir sayfadan giriş sayfasına nasıl yeniden yönlendirebileceğinizi göstermek için bir Giriş formu kullandı.
