前言

在Web应用程序中,需要对一些页面进行访问限制,只允许已经登录的用户访问受保护的页面。React Router可以通过使用高阶组件(Higher-order Components,HOC)实现路由拦截。本文将介绍如何使用React Router实现路由拦截功能。

一、创建一个HOC组件

首先,我们需要创建一个HOC组件,该组件接受一个组件作为参数,并返回一个新的组件。例如,我们可以定义一个名为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;
};

三、实现路由拦截

AuthWrapper组件中,可以使用componentDidMount生命周期函数或者useEffect钩子函数来检查用户是否已经登录(或者其它业务逻辑)。如果用户没有登录,则可以使用history.push()函数将用户重定向到登录页面:

import { useEffect } from 'react';

const AuthWrapper = (Component) => {
  const WrappedComponent = withRouter((props) => {
    useEffect(() => {
      // 检查用户是否已经登录
      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作为参数,并返回一个新的组件,该组件可以实现路由拦截。

在应用程序中,我们可以使用Route组件来定义路由,将受保护的Dashboard组件包装在AuthWrapper组件中,实现路由拦截。如果用户已经登录,则可以访问受保护的路由,如果未登录,则会被重定向到登录页面

至此,我们已经成功地使用React Router实现了路由拦截功能。

完整示例

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

// 定义一个HOC组件,用于实现路由拦截
const AuthWrapper = (Component) => {
  // 使用withRouter高阶组件,将路由信息作为props传递给组件
  const WrappedComponent = withRouter((props) => {
    useEffect(() => {
      // 在组件加载完成后,检查用户是否已经登录
      const user = localStorage.getItem('user');
      if (!user) {
        // 如果用户没有登录,则重定向到登录页面
        props.history.push('/login');
      }
    }, [props.history]);

    // 如果用户已经登录,则渲染原始组件
    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>
  );
};
原文地址:https://blog.csdn.net/glx490676405/article/details/129485097

相关文章: