当前位置：首页 > React

react如何检测session

2026-01-23 20:19:01React

检测 Session 的方法

在 React 中检测用户会话（Session）通常需要结合后端服务或浏览器存储机制。以下是几种常见的方法：

使用 Cookies 检测 Session

Cookies 是存储会话信息的常用方式。通过检查 Cookie 中是否存在特定的 Session ID 或其他标识符，可以判断用户是否处于有效会话中。

import { useEffect } from 'react';

const checkSessionCookie = () => {
  const cookies = document.cookie.split(';').reduce((acc, cookie) => {
    const [key, value] = cookie.trim().split('=');
    acc[key] = value;
    return acc;
  }, {});

  return cookies.sessionId !== undefined;
};

const SessionChecker = () => {
  useEffect(() => {
    const hasSession = checkSessionCookie();
    if (!hasSession) {
      // 重定向到登录页面或其他处理逻辑
    }
  }, []);

  return null;
};

使用 localStorage 或 sessionStorage

如果会话信息存储在浏览器的 localStorage 或 sessionStorage 中，可以通过读取这些存储来判断会话状态。

const checkLocalStorageSession = () => {
  const sessionData = localStorage.getItem('userSession');
  return sessionData !== null;
};

const SessionChecker = () => {
  useEffect(() => {
    const hasSession = checkLocalStorageSession();
    if (!hasSession) {
      // 处理无会话的情况
    }
  }, []);

  return null;
};

调用后端 API 验证 Session

更可靠的方式是调用后端 API 验证当前会话是否有效。通常后端会返回一个布尔值或用户信息。

const verifySession = async () => {
  try {
    const response = await fetch('/api/verify-session', {
      credentials: 'include',
    });
    return response.ok;
  } catch (error) {
    return false;
  }
};

const SessionChecker = () => {
  useEffect(() => {
    verifySession().then(isValid => {
      if (!isValid) {
        // 处理无效会话
      }
    });
  }, []);

  return null;
};

使用 Context 或状态管理

在全局状态管理（如 Context 或 Redux）中维护会话状态，可以方便地在组件中访问和更新。

react如何检测session

import { createContext, useContext, useEffect, useState } from 'react';

const SessionContext = createContext();

const SessionProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    verifySession().then(isValid => {
      setIsAuthenticated(isValid);
    });
  }, []);

  return (
    <SessionContext.Provider value={{ isAuthenticated }}>
      {children}
    </SessionContext.Provider>
  );
};

const useSession = () => useContext(SessionContext);