React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截功能
前言
在Web應(yīng)用程序中,需要對(duì)一些頁面進(jìn)行訪問限制,只允許已經(jīng)登錄的用戶訪問受保護(hù)的頁面。React Router可以通過使用高階組件(Higher-order Components,HOC)實(shí)現(xiàn)路由攔截。本文將介紹如何使用React Router實(shí)現(xiàn)路由攔截功能。
一、創(chuàng)建一個(gè)HOC組件
首先,我們需要?jiǎng)?chuàng)建一個(gè)HOC組件,該組件接受一個(gè)組件作為參數(shù),并返回一個(gè)新的組件。例如,我們可以定義一個(gè)名為
AuthWrapper
的HOC組件
const AuthWrapper = (Component) => { // ... };
二、使用withRouter組件
在
AuthWrappe
r組件中,我們可以使用React Router提供的withRouter
高階組件,該組件可以將路由信息添加到組件的prop
s中:
import { withRouter } from 'react-router-dom'; const AuthWrapper = (Component) => { const WrappedComponent = withRouter((props) => { // ... }); return WrappedComponent; };
三、實(shí)現(xiàn)路由攔截
在
AuthWrapper
組件中,可以使用componentDidMount
生命周期函數(shù)或者useEffect
鉤子函數(shù)來檢查用戶是否已經(jīng)登錄(或者其它業(yè)務(wù)邏輯)。如果用戶沒有登錄,則可以使用history.push()
函數(shù)將用戶重定向到登錄頁面:
import { useEffect } from 'react'; const AuthWrapper = (Component) => { const WrappedComponent = withRouter((props) => { useEffect(() => { // 檢查用戶是否已經(jīng)登錄 const user = localStorage.getItem('user'); if (!user) { // 重定向到登錄頁面 props.history.push('/login'); } }, [props.history]); // 渲染原始組件 return <Component {...props} />; }); return WrappedComponent; };
在需要訪問的受保護(hù)的路由中,可以使用AuthWrapper組件來包裝路由組件:
<Route path="/dashboard" component={AuthWrapper(Dashboard)} />
在上面的代碼中,AuthWrapper將路由組件Dashboard作為參數(shù),并返回一個(gè)新的組件,該組件可以實(shí)現(xiàn)路由攔截。
在應(yīng)用程序中,我們可以使用Route組件來定義路由,將受保護(hù)的Dashboard組件包裝在AuthWrapper組件中,實(shí)現(xiàn)路由攔截。如果用戶已經(jīng)登錄,則可以訪問受保護(hù)的路由,如果未登錄,則會(huì)被重定向到登錄頁面
至此,我們已經(jīng)成功地使用React Router實(shí)現(xiàn)了路由攔截功能。
完整示例
import React, { useEffect } from 'react'; import { Route, Redirect, withRouter } from 'react-router-dom'; // 定義一個(gè)HOC組件,用于實(shí)現(xiàn)路由攔截 const AuthWrapper = (Component) => { // 使用withRouter高階組件,將路由信息作為props傳遞給組件 const WrappedComponent = withRouter((props) => { useEffect(() => { // 在組件加載完成后,檢查用戶是否已經(jīng)登錄 const user = localStorage.getItem('user'); if (!user) { // 如果用戶沒有登錄,則重定向到登錄頁面 props.history.push('/login'); } }, [props.history]); // 如果用戶已經(jīng)登錄,則渲染原始組件 return localStorage.getItem('user') ? <Component {...props} /> : null; }); // 返回一個(gè)新的組件,該組件可以進(jìn)行路由攔截 return WrappedComponent; }; // 受保護(hù)的Dashboard組件,需要進(jìn)行路由攔截 const Dashboard = () => { return <h1>Dashboard</h1>; }; // 定義路由 const App = () => { return ( <div> <Route path="/dashboard" component={AuthWrapper(Dashboard)} /> <Route path="/login" component={Login} /> </div> ); }; // 登錄組件 const Login = () => { const handleLogin = () => { // 模擬登錄成功,將用戶信息保存到localStorage中 localStorage.setItem('user', 'foo'); }; return ( <div> <h1>Login</h1> <button onClick={handleLogin}>Login</button> </div> ); };
到此這篇關(guān)于React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截的文章就介紹到這了,更多相關(guān)React Router 路由攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼,2017-09-09react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問題及解決
這篇文章主要介紹了react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08React+Electron快速創(chuàng)建并打包成桌面應(yīng)用的實(shí)例代碼
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12React?Native?中處理?Android?手機(jī)吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機(jī)吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下,編寫了一個(gè)小 demo 來復(fù)現(xiàn)這個(gè)問題,需要的朋友可以參考下2022-08-08React.memo 和 useMemo 的使用問題小結(jié)
隨著代碼的增加,每次的狀態(tài)改變,頁面進(jìn)行一次 reRender ,這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能,從而導(dǎo)致頁面卡頓,這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結(jié),需要的朋友可以參考下2022-11-11