React 路由守卫与全局 loading 控制：轻松实现权限和进度管理

2023-10-25 21:01:35

概述

在 React 应用中，路由守卫和全局 loading 都是非常重要的概念。路由守卫允许我们在用户访问特定路由之前或之后执行一些操作，例如检查用户权限或显示 loading 动画。全局 loading 可以帮助我们在页面加载时显示一个 loading 动画，从而提高用户体验。

实现路由守卫

React Router 提供了两个路由守卫钩子函数，分别是 beforeEach 和 afterEach。我们可以通过使用这两个钩子函数来实现路由守卫。

beforeEach： 在进入一个路由之前调用。我们可以在这里检查用户权限，如果用户没有权限，我们可以重定向用户到其他路由。
afterEach： 在进入一个路由之后调用。我们可以在这里执行一些操作，例如记录用户访问的路由。

下面是一个使用 beforeEach 路由守卫钩子函数实现权限管理的示例：

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  const router = useRouter();

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/login');
    }
  }, [router]);

  return <Component {...rest} />;
};

在这个示例中，我们使用 PrivateRoute 组件来保护路由。PrivateRoute 组件在进入路由之前会检查用户是否已登录，如果用户未登录，则会重定向用户到 /login 路由。

实现全局 loading

我们可以使用 useState 和 useEffect 钩子函数来实现全局 loading。

useState： 用于管理 loading 状态。
useEffect： 在组件挂载时调用，我们可以在这里开始 loading 动画。当组件卸载时，我们可以在这里停止 loading 动画。

下面是一个使用 useState 和 useEffect 钩子函数实现全局 loading 的示例：

import { useState, useEffect } from 'react';

const Loading = () => {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);

    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <div>
      {isLoading && <div>Loading...</div>}
    </div>
  );
};