如何检查用户登录状态并实现用户名展示功能

下面分不同技术场景给出务实的实现方式：

前端原生JavaScript实现 #

核心思路是登录成功后将用户信息（如用户名）存储在浏览器的localStorage/sessionStorage或Cookie中，页面加载时读取并判断状态：

// 页面加载完成后执行校验
window.addEventListener('DOMContentLoaded', () => {
  // 从localStorage读取登录用户信息（登录时需先存入）
  const loggedUserStr = localStorage.getItem('loggedInUser');
  const greetingEl = document.getElementById('greeting-container');

  if (loggedUserStr) {
    const user = JSON.parse(loggedUserStr);
    greetingEl.textContent = `Hello, ${user.username}!`;
  } else {
    greetingEl.textContent = '请登录以使用完整功能';
    // 可选：自动跳转到登录页
    // window.location.href = '/login.html';
  }
});

注意：

• localStorage会持久保存数据，除非主动删除；sessionStorage在浏览器关闭后清空
• 不要在前端存储敏感信息（如密码），敏感校验逻辑必须放在后端
• 若需更高安全性，改用HttpOnly Cookie存储登录凭证

React项目实现 #

可以结合useState和useEffect读取前端存储，或使用状态管理库（如Zustand、Redux）统一管理用户状态：

import { useState, useEffect } from 'react';

export default function Greeting() {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 初始化时读取存储的用户信息
    const storedUser = localStorage.getItem('loggedInUser');
    if (storedUser) {
      setCurrentUser(JSON.parse(storedUser));
    }
  }, []);

  return (
    <div className="greeting">
      {currentUser ? (
        <span>Hello, {currentUser.username}!</span>
      ) : (
        <span>请登录</span>
      )}
    </div>
  );
}

后端渲染场景（以Node.js/Express + EJS为例） #

登录成功后将用户信息存入Session，渲染模板时直接判断并传递问候内容：

后端路由逻辑 #

const express = require('express');
const session = require('express-session');
const app = express();

// 配置session
app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false
}));

// 首页路由
app.get('/', (req, res) => {
  let greeting = '请登录';
  // 检查session中的用户信息
  if (req.session.user) {
    greeting = `Hello, ${req.session.user.username}!`;
  }
  // 渲染EJS模板
  res.render('index', { greeting });
});

EJS模板代码 #

<div class="greeting">
  <%= greeting %>
</div>

Java Spring Boot + Thymeleaf实现 #

借助Spring Security的认证上下文，直接在模板中判断登录状态：

<div class="greeting">
  <div th:if="${#authentication.isAuthenticated()}">
    Hello, <span th:text="${#authentication.name}"></span>!
  </div>
  <div th:unless="${#authentication.isAuthenticated()}">
    请登录
  </div>
</div>

通用注意事项 #

1. 前后端双重校验：前端仅做显示逻辑，后端接口必须再次校验用户登录状态，防止前端篡改
2. 凭证安全：使用JWT或HttpOnly Cookie存储登录凭证，避免XSS攻击
3. 状态同步：用户登出时需清除前端存储的用户信息及后端Session/Token

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