react页面登录跳转实现

实现登录跳转的基本逻辑

在React中实现登录跳转通常涉及路由控制和状态管理。使用React Router进行页面导航，结合状态管理工具（如Context或Redux）存储登录状态。

安装必要依赖包：

npm install react-router-dom

创建路由配置

在根组件中配置路由，设置受保护的路由和公开路由。私有路由需要登录后才能访问，否则重定向到登录页。

import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/dashboard" element={
          <PrivateRoute>
            <DashboardPage />
          </PrivateRoute>
        }/>
        <Route path="/" element={<Navigate to="/dashboard" />} />
      </Routes>
    </BrowserRouter>
  );
}

实现私有路由组件

创建高阶组件PrivateRoute，用于检查用户登录状态。未登录时重定向到登录页面。

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from './AuthContext';

function PrivateRoute({ children }) {
  const { isAuthenticated } = useContext(AuthContext);

  return isAuthenticated ? children : <Navigate to="/login" />;
}

创建认证上下文

使用React Context管理全局认证状态，提供登录/登出方法和当前状态。

import { createContext, useState } from 'react';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => setIsAuthenticated(true);
  const logout = () => setIsAuthenticated(false);

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

实现登录页面

创建登录表单组件，处理提交事件并在成功后跳转。

import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from './AuthContext';

function LoginPage() {
  const { login } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 实际项目中这里应调用API验证凭证
    login();
    navigate('/dashboard'); // 登录成功跳转
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Login</button>
    </form>
  );
}

处理登录后重定向

有时需要记住用户原本想访问的页面，登录后重定向回该页面。可以通过state传递原始路径。

// 在PrivateRoute组件中修改重定向
<Navigate to="/login" state={{ from: location.pathname }} />

// 在LoginPage中获取并处理重定向
const location = useLocation();
const from = location.state?.from || '/dashboard';
navigate(from);

持久化登录状态

使用localStorage或cookie持久化登录状态，避免页面刷新后丢失。

// 在AuthProvider中
const [isAuthenticated, setIsAuthenticated] = useState(
  localStorage.getItem('isLoggedIn') === 'true'
);

const login = () => {
  setIsAuthenticated(true);
  localStorage.setItem('isLoggedIn', 'true');
};

const logout = () => {
  setIsAuthenticated(false);
  localStorage.removeItem('isLoggedIn');
};

使用路由守卫的替代方案

对于更复杂的场景，可以使用自定义history对象和监听器实现全局路由守卫。

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.listen((location, action) => {
  // 检查是否需要认证
  if (requiresAuth(location.pathname) && !isAuthenticated) {
    history.push('/login');
  }
});