Node.js+React中手动删除JWT Cookie后未自动跳转登录页问题

你当前的鉴权校验逻辑仅写在Home组件的useEffect空依赖回调中，该逻辑只会在Home组件首次挂载时执行1次。用户手动通过开发者工具删除Cookie时，React组件既不会重新渲染，也不会重新触发校验请求，自然不会执行跳转逻辑；只有手动刷新页面重新挂载Home组件时，校验逻辑才会再次运行，这就是你遇到的现象的核心原因。
另外补充：标记为httpOnly的Cookie无法通过前端JS读取，也没有原生API可以监听Cookie的手动删除操作，所以无法做到删除动作触发的瞬间立刻响应。

通过三层逻辑覆盖所有登录态失效场景，包括手动删除Cookie、Cookie过期、服务端作废Token等：

• 第一层：封装全局Axios响应拦截器，统一处理所有接口返回的401未授权状态，避免每个页面单独写跳转逻辑
• 第二层：封装全局路由鉴权守卫，所有需要登录态的路由在进入前自动校验权限，无权限直接拦截跳登录页
• 第三层：增加轻量登录态心跳检测，在用户登录状态下定时发起鉴权校验请求，及时发现手动删Cookie这类没有触发业务接口请求的登录态失效场景

具体代码实现 #

1. 先封装带统一拦截器的Axios实例，替换你项目里直接引入的原生axios：

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:9000',
  withCredentials: true,
  timeout: 5000
})

// 响应拦截器统一处理401
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 此处可补充清空Redux中存储的用户信息的逻辑
      window.location.replace('/login')
    }
    return Promise.reject(error)
  }
)

export default service

2. 在项目根组件（一般是App.js）中增加心跳检测逻辑：

// App.js
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import request from './utils/request'

function App() {
  // 从Redux取当前登录状态，避免未登录状态下发送无效心跳
  const isLoggedIn = useSelector(state => state.user.isLoggedIn)

  useEffect(() => {
    if (!isLoggedIn) return
    // 间隔15秒发送一次轻量鉴权请求，平衡实时性和服务端压力
    const heartbeatTimer = setInterval(() => {
      request.get('/auth/redirecthome')
    }, 15000)

    return () => clearInterval(heartbeatTimer)
  }, [isLoggedIn])

  // 原有路由渲染逻辑保持不变
}

3. 清理冗余代码：把Home组件中单独写的校验、跳转逻辑删掉即可，后续所有接口请求、路由跳转都会自动走全局鉴权逻辑。

说明：15秒间隔的心跳用户几乎感知不到延迟，完全满足常规业务的实时性要求；如果对实时性要求更高，可以把心跳间隔调整到5-10秒，对服务端的压力也非常小。

内容的提问来源于stack exchange，提问作者Sharanjeet Singh