快捷導(dǎo)航

React Router V5:使用HOC組件實現(xiàn)路由攔截功能

更新時間：2023年03月14日 09:31:12 作者：Bennett_G

這篇文章主要介紹了React Router V5:使用HOC組件實現(xiàn)路由攔截功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

前言

在Web應(yīng)用程序中，需要對一些頁面進行訪問限制，只允許已經(jīng)登錄的用戶訪問受保護的頁面。React Router可以通過使用高階組件（Higher-order Components，HOC）實現(xiàn)路由攔截。本文將介紹如何使用React Router實現(xiàn)路由攔截功能。

一、創(chuàng)建一個HOC組件

首先，我們需要創(chuàng)建一個HOC組件，該組件接受一個組件作為參數(shù)，并返回一個新的組件。例如，我們可以定義一個名為AuthWrapper的HOC組件

const AuthWrapper = (Component) => {
  // ...
};

二、使用withRouter組件

在AuthWrapper組件中，我們可以使用React Router提供的withRouter高階組件，該組件可以將路由信息添加到組件的props中：

import { withRouter } from 'react-router-dom';

const AuthWrapper = (Component) => {
  const WrappedComponent = withRouter((props) => {
    // ...
  });

  return WrappedComponent;
};

三、實現(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;
};

在需要訪問的受保護的路由中，可以使用AuthWrapper組件來包裝路由組件：

<Route path="/dashboard" component={AuthWrapper(Dashboard)} />

在上面的代碼中，AuthWrapper將路由組件Dashboard作為參數(shù)，并返回一個新的組件，該組件可以實現(xiàn)路由攔截。

在應(yīng)用程序中，我們可以使用Route組件來定義路由，將受保護的Dashboard組件包裝在AuthWrapper組件中，實現(xiàn)路由攔截。如果用戶已經(jīng)登錄，則可以訪問受保護的路由，如果未登錄，則會被重定向到登錄頁面

至此，我們已經(jīng)成功地使用React Router實現(xiàn)了路由攔截功能。

完整示例

import React, { useEffect } from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';

// 定義一個HOC組件，用于實現(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;
  });

  // 返回一個新的組件，該組件可以進行路由攔截
  return WrappedComponent;
};

// 受保護的Dashboard組件，需要進行路由攔截
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組件實現(xiàn)路由攔截的文章就介紹到這了,更多相關(guān)React Router 路由攔截內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: