React项目logout登出功能异常 浏览器访问/logout显示空白页

问题表现 #

• 用Postman测试后端/logout接口，可正常返回user logged out响应，接口逻辑本身运行正常
• 浏览器中触发登出逻辑后，页面停留在/logout路径，仅展示空白页面，无任何内容，也未按预期跳转到登录页

现有实现代码 #

前端Logout组件 #

import React, { userEffect } from "react";
import {useHistory} from "react-router";

const Logout=() =>{
  const history = useHistory()
  const logout = async () => {
    try {
      const res = await fetch("/logout", {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (res.status === 401 || !res) {
        window.alert("please logout later");
      } else {
        window.location.reload();
        history.push("/login");
      }
    } catch (error) {
      console.log(error);
    }
  };
  userEffect(() => {
    logout();
  
  }, []);

  return (
    <div>

    </div>
  ) 
}
export default Logout;

后端/logout接口（Node/Express） #

app.get('/logout',(req, res)=>{
  res.clearCookie('jwt', {path: '/'})
  res.status(200).send('user logged out')
}) 

问题根因 #

1. React Hook拼写错误：组件内引入和调用的是userEffect，正确的生命周期Hook名是useEffect。这个拼写错误直接导致组件挂载时不会执行定义的logout方法，而组件本身返回的是空的div容器，自然就显示为空白页。
2. 登出成功后的执行顺序逻辑错误：就算修正Hook拼写，原代码在登出成功后先调用window.location.reload()，会直接触发当前页面（也就是/logout路由对应页面）整页刷新，后续的history.push("/login")根本没有执行机会；刷新后页面依然停留在/logout路由，会再次挂载Logout组件触发登出逻辑，甚至可能引发无限刷新循环。

修复后代码 #

前端Logout组件修正 #

import React, { useEffect } from "react";
import {useHistory} from "react-router";

const Logout=() =>{
  const history = useHistory()
  const logout = async () => {
    try {
      const res = await fetch("/logout", {
        method: "POST", // 建议用POST请求做登出这类状态变更操作，更符合接口规范
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (res.status !== 200) {
        window.alert("please logout later");
      } else {
        // 先跳转到登录页，再触发页面刷新重置前端登录状态
        history.push("/login");
        window.location.reload();
      }
    } catch (error) {
      console.log(error);
      window.alert("please logout later");
    }
  };
  useEffect(() => {
    logout();
  }, []);

  // 增加加载提示，避免空白页体验问题
  return (
    <div>
      登出中...
    </div>
  ) 
}
export default Logout;

后端接口对应调整（如果前端改了POST请求方法） #

// 把get改成post，和前端请求方法匹配即可
app.post('/logout',(req, res)=>{
  res.clearCookie('jwt', {path: '/'})
  res.status(200).send('user logged out')
}) 

如果暂时不想调整请求方法，保持GET方式也可以正常运行，核心是修正Hook拼写和登出成功后的执行顺序，就能解决空白页问题。

内容的提问来源于stack exchange，提问作者Erij Maherzia BEN BRAHIM