在 React 应用中，处理 登录重定向 是常见的需求，尤其是在涉及 状态管理 和 路由导航 的同步时。通过合适的状态管理工具（如 React Context、Redux）和路由导航工具（如 React Router），可以轻松实现登录状态的控制与页面跳转的同步。

以下是一个基本的实现方案，介绍如何通过 React Context 和 React Router 来完成登录重定向。

1. 环境准备

首先，确保你已经安装了相关的库：

npm install react-router-dom

如果你需要使用 Redux，还需要安装：

npm install react-redux redux

2. 状态管理：React Context（用于登录状态）

我们可以使用 React Context 来全局管理用户的登录状态。通过设置 isAuthenticated 来表示用户是否已经登录。

2.1 创建用户认证 Context

// context/AuthContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface AuthContextType {
  isAuthenticated: boolean;
  login: () => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

在上面的代码中，AuthContext 维护了 isAuthenticated 状态，且提供了 login 和 logout 方法来更新登录状态。useAuth 是一个自定义 Hook，用于在任何组件中访问认证信息。

2.2 在应用根组件中使用 AuthProvider

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import { Home } from './pages/Home';
import { Login } from './pages/Login';
import { Dashboard } from './pages/Dashboard';

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

3. 路由导航与重定向

接下来，我们需要根据 isAuthenticated 的值来控制用户是否可以访问特定的页面。如果用户没有登录，我们将他们重定向到 登录页。

3.1 使用 React Router 的 Navigate 进行重定向

假设我们有一个受保护的页面 Dashboard，只有当用户已经登录时才能访问。

// pages/Dashboard.tsx
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export const Dashboard = () => {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      // 如果用户没有登录，重定向到登录页面
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);

  return isAuthenticated ? (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome to the Dashboard</p>
    </div>
  ) : (
    <div>Redirecting...</div>
  );
};

在这个例子中，useEffect 会监听 isAuthenticated 的变化。如果 isAuthenticated 为 false，则会调用 navigate('/login') 来跳转到登录页面。

3.2 登录页面逻辑与重定向

在 Login 页面，登录成功后需要将用户重定向到 Dashboard 或其他页面。

// pages/Login.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { login, isAuthenticated } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    // 假设简单的用户名密码校验
    if (username === 'admin' && password === 'password') {
      login(); // 登录成功
      navigate('/dashboard'); // 登录后重定向
    } else {
      alert('Invalid credentials');
    }
  };

  if (isAuthenticated) {
    navigate('/dashboard'); // 如果用户已经登录，直接重定向到 dashboard
  }

  return (
    <div>
      <h2>Login</h2>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

在 Login 页面，用户输入用户名和密码后，如果认证通过，则调用 login() 来更新认证状态，并使用 navigate('/dashboard') 重定向到仪表盘页面。

4. 其他最佳实践

  • 保护路由：在一些较为复杂的应用中，通常会有多个受保护的路由。在这种情况下，可以抽象出一个高阶组件 (HOC) 或自定义路由组件来封装路由的访问控制逻辑。
// ProtectedRoute.tsx
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

interface ProtectedRouteProps {
  element: React.ReactNode;
  path: string;
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ element, path }) => {
  const { isAuthenticated } = useAuth();

  return (
    <Route
      path={path}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

总结

  • 使用 React Context 管理登录状态，可以在应用中任何地方访问用户的登录状态。
  • 使用 React Router 进行页面跳转，并根据登录状态控制重定向。
  • 在登录页面，成功登录后使用 navigate() 重定向到目标页面。
  • 使用 useEffect 来监听状态变化，并控制路由导航。

通过这种方式，可以轻松实现 登录状态与路由导航的同步，确保只有经过认证的用户才能访问受保护的页面。