# 第四章：登录流程与状态管理 (Login & State)

![04_login.png](https://developer.qcloudimg.com/http-save/yehe-12010127/c86d9654447c6555ab8fb90a81a40bf9.jpg)

一个真正的应用需要识别用户。在这一章，我们将实现基于微信扫码的登录系统，并使用 LocalStorage 记住用户的登录状态。

## 1. 视图切换逻辑

我们的应用有两个核心视图：

1.  **登录区 (`#loginSection`)**：显示二维码。
2.  **主界面 (`#mainSection`)**：显示用户信息和摸鱼按钮。

默认情况下，它们都隐藏，或者由 JS 控制显示。

```html

<div id="loginSection">
  <div class="qr-placeholder" id="qrContainer">
    <div class="qr-loading">正在获取登录码...</div>
  </div>
  <p>请使用微信扫码登录</p>
</div>


<div id="mainSection" style="display:none;">
  <div class="user-info">
    <span class="user-name" id="userName">User</span>
    <span id="userId">UID: --</span>
  </div>
  
  <button class="moyu-btn" id="moyuBtn">...</button>
</div>
```

## 2. 初始化检查 (LocalStorage)

页面加载时，我们首先检查本地是否已经有用户信息的缓存。如果有，直接进入主界面；否则，获取二维码。

```javascript
let currentUser = null;

function init() {
  // 尝试从 LocalStorage 读取
  const storedUser = localStorage.getItem("moyu_user");

  if (storedUser) {
    try {
      currentUser = JSON.parse(storedUser);
      // 隐藏登录页，显示主页
      loginSection.style.display = "none";
      showMain(currentUser);
      return;
    } catch (e) {
      // 解析失败，忽略
    }
  }

  // 无缓存，开始登录流程
  getQRCode();
}

// 页面加载完成后立即执行 init()
document.addEventListener("DOMContentLoaded", init);
```

## 3. 获取二维码与轮询 (Polling)

这是前后端交互的核心。

1.  请求 `get_qrcode` 接口获取二维码 URL 和 `scene_id`。
2.  设置定时器，每 2 秒查询一次 `check_login` 接口。

```javascript
const LOGIN_API_URL =
  "https://www.ytecn.com/zb_users/plugin/YtUser/login_official_api.php";
let checkInterval;

async function getQRCode() {
  try {
    const response = await fetch(`${LOGIN_API_URL}?act=get_qrcode`);
    const data = await response.json();

    if (data.qrcode_url && data.scene_id) {
      // 渲染二维码
	//src="${data.qrcode_url}"
      qrContainer.innerHTML = `<img src="" width="100%" height="100%">`;
      // 开始轮询
      startPolling(data.scene_id);
    }
  } catch (e) {
    qrContainer.textContent = "连接服务器失败";
  }
}

function startPolling(sceneId) {
  if (checkInterval) clearInterval(checkInterval);

  checkInterval = setInterval(async () => {
    try {
      // 检查登录状态
      const res = await fetch(
        `${LOGIN_API_URL}?act=check_login&scene_id=${sceneId}`,
      );
      const data = await res.json();

      // 登录成功 (根据接口返回的 status 或 code 判断)
      if (data.status === 1 || data.code === 0) {
        clearInterval(checkInterval);
        loginSuccess(data.data || data); // 进入成功回调
      }
    } catch (e) {
      console.error("Polling error", e);
    }
  }, 2000); // 2秒查一次
}
```

## 4. 登录成功与状态更新

登录成功后，我们应该：

1.  保存用户信息到全局变量和 LocalStorage。
2.  切换视图。
3.  检查用户今天“摸过”没有。

```javascript
async function loginSuccess(user) {
  // 1. 保存状态
  currentUser = user;
  localStorage.setItem("moyu_user", JSON.stringify(user));

  // 2. 切换视图
  loginSection.style.display = "none";
  showMain(user);
}

function showMain(user) {
  mainSection.style.display = "flex";
  userName.textContent = user.nickname || "摸鱼大师";

  // 3. 检查今日打卡状态
  checkDailyStatus();
}
```

## 5. 每日打卡状态检查

我们不仅要看用户及其服务端数据，还要利用 LocalStorage 做一个简单的本地防抖，防止同一天重复点击按钮（虽然服务端也会拦截）。

```javascript
function checkDailyStatus() {
  // 获取今天的日期字符串，例如 "2023-10-27"
  const today = new Date().toISOString().split("T")[0];
  const uid = currentUser.uid || "guest";

  // 读取本地记录
  const lastMoyu = localStorage.getItem(`moyu_record_${uid}`);

  // 如果服务端标记已摸鱼，或者本地记录是今天
  if (currentUser.isMoyu || lastMoyu === today) {
    // 设置按钮为绿色“已摸”状态
    moyuBtn.classList.add("clocked-in");
    moyuBtn.querySelector("span").textContent = "今日已摸";
    statusText.textContent = getFunnyQuote();
  } else {
    // 允许打卡
    moyuBtn.onclick = handleMoyuClick;
    moyuBtn.classList.remove("clocked-in");
  }
}
```

现在，我们的应用已经具备了完整的用户身份系统。无论用户刷新页面还是关闭重开，都能保持登录状态。

## 在线体验

> **在线演示**：[https://www.ytecn.com/dev/tool/moyu.html](https://www.ytecn.com/dev/tool/moyu.html)  
> **开源代码**：[https://gitee.com/ytecnsong/web-dev-toolkit](https://gitee.com/ytecnsong/web-dev-toolkit)

下一章，也是最后一章，我们将在此基础之上添加社交功能——添加“紧急联系人”，让摸鱼更安全。

一个真正的应用需要识别用户。在这一章，我们将实现基于微信扫码的登录系统，并使用 LocalStorage 记住用户的登录状态。

【摸鱼工具开发】第四章：登录流程与状态管理 (Login & State)

开发工具

本章详解微信扫码登录实现方案，包含视图切换、LocalStorage状态管理、二维码获取与轮询机制。通过前端缓存用户信息实现持久化登录，并整合每日打卡状态检查功能，确保用户刷新页面仍保持登录状态。

服务器

JSON

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【摸鱼工具开发】第四章：登录流程与状态管理 (Login & State)-腾讯云开发者社区-腾讯云

【摸鱼工具开发】第四章：登录流程与状态管理 (Login & State)

【摸鱼工具开发】第四章：登录流程与状态管理 (Login & State)

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐