如何在React JS应用UI中展示未登录访问者的用户名

未登录但有权限访问非受限页面的场景，本质上是服务端已经通过IP白名单、内网身份透传、临时访客令牌等方式完成了身份识别，只是没有走常规的账号密码登录流程，你可以根据你的项目架构选择以下方案实现：

方案1：从服务端注入的全局变量获取 #

• 适用场景：服务端渲染（SSR）、静态页模板注入场景，比如用Next.js、Express返回HTML的项目
• 实现步骤：
  1. 服务端返回HTML时，往<head>标签中插入脚本，将用户名挂载到全局window对象上，比如：<script>window.GUEST_USER = {name: "访客李四"}</script>
  2. React组件中直接读取该全局变量即可，注意添加空值判断避免页面报错
  3. 参考代码：

  function UserBanner() {
    const userName = window.GUEST_USER?.name || "匿名访客";
    return <div className="user-name">当前用户：{userName}</div>
  }
  

  注意：不要在这个全局变量中存储敏感信息，该数据前端可直接查看修改

方案2：调用后端公开身份接口获取 #

• 适用场景：纯客户端渲染（SPA）的项目，服务端没有预先注入全局变量
• 实现步骤：
  1. 后端提供一个不需要登录态就能调用的公开接口，比如/api/public/visitor-info，后端通过请求IP、请求头内网标识、Cookie中携带的临时访客标记识别用户身份，返回用户名字段
  2. React组件挂载时调用接口获取数据，存储到state或者状态管理工具中
  3. 参考代码：

  import { useState, useEffect } from 'react';
  
  function UserBanner() {
    const [userName, setUserName] = useState("加载中...");
  
    useEffect(() => {
      const getVisitorInfo = async () => {
        try {
          const res = await fetch("/api/public/visitor-info");
          const data = await res.json();
          setUserName(data.userName || "匿名访客");
        } catch (err) {
          setUserName("匿名访客");
        }
      }
      getVisitorInfo();
    }, [])
  
    return <div className="user-name">当前用户：{userName}</div>
  }
  

  如果担心接口被恶意调用，可以服务端加简单的限流或者请求签名校验

方案3：从Cookie/本地存储读取 #

• 适用场景：用户之前提交过访客身份信息，或者服务端已经将用户名写入非HttpOnly的Cookie中
• 实现步骤：
  1. 直接读取Cookie或者localStorage中存储的用户名字段，注意做合法性校验
  2. 参考代码：

  // 简易Cookie读取工具
  const getCookie = (key) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${key}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  
  function UserBanner() {
    const userName = getCookie("guest_name") || localStorage.getItem("guestName") || "匿名访客";
    return <div className="user-name">当前用户：{userName}</div>
  }
  

  该方案获取的用户名可被用户手动修改，仅适合非敏感展示场景，涉及权限校验的逻辑必须以服务端判断为准

内容的提问来源于stack exchange，提问作者Raju Kapadne