前端存储之 Cookie：用户登录与会话管理

小公主
227 阅读4分钟

在 Web 开发中，前端存储技术扮演着至关重要的角色。特别是在用户身份验证和会话管理方面，Cookie 是一种经典的存储方式，广泛用于保存用户的登录状态以及其他少量数据。本文将结合实际代码，探讨如何通过 Cookie 存储登录信息，并在 Node.js 后端实现用户认证和会话验证。

什么是 Cookie？

Cookie 是浏览器提供的一种存储机制，用于保存少量数据。每当浏览器发起请求时，相关的 Cookie 会被自动附带在请求中，这样服务器就能识别用户的身份或保存用户的某些偏好设置。Cookie 主要用于以下场景：

  • 身份验证：存储会话 ID 或令牌，帮助服务器识别用户。
  • 用户偏好：存储用户的界面设置或语言选择。

Cookie 的特点

  • 数据大小：Cookie 的大小有限，通常不超过 4KB，因此适合存储少量数据。
  • 自动发送：每次请求时，浏览器会自动带上相关的 Cookie。
  • 过期时间：Cookie 可以设置过期时间，过期后会自动删除。
  • 作用域：可以限制 Cookie 的作用范围，指定哪些页面或子域能访问该 Cookie。

使用 Cookie 实现用户登录

Cookie 在管理用户登录状态时非常有用。我们可以通过 Cookie 存储用户的登录信息，让用户在后续访问时无需重新登录。接下来，我们将展示如何通过 Cookie 完成登录和会话验证的操作。

前端：提交登录表单并设置 Cookie

在前端，我们创建一个登录表单，当用户输入用户名和密码并提交时，数据将发送到后端进行验证。如果验证通过，后端会返回一个带有登录信息的 Cookie。浏览器会自动保存这个 Cookie，并在后续的请求中发送它。

const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();
  
  try {
    const response = await fetch('/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username,
        password,
      }),
    });
    const data = await response.json();
    console.log(data);  // 登录结果
  } catch (error) {
    console.log('登录出错了');
  }
});

这里，用户提交登录表单时，JavaScript 会通过 fetch API 向后端发送用户名和密码。如果登录成功，后端会返回一个设置了 Cookie 的响应。

后端：用户验证与 Cookie 设置

在 Node.js 后端，我们处理 /login 路径的 POST 请求，进行用户名和密码的验证。如果验证成功，我们会设置一个名为 user 的 Cookie，用于标识用户已登录。

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/login') {
    // 假设用户名和密码验证成功
    res.writeHead(200, {
      'Set-Cookie': 'user=admin',  // 设置登录成功的 Cookie
      'Content-Type': 'application/json',
    });
    res.end(
      JSON.stringify({
        success: true,
        msg: '登录成功',
      })
    );
  }
});
server.listen(8080);

在此代码中，Set-Cookie 头部设置了 user=admin 的 Cookie，标识用户已成功登录。浏览器会将该 Cookie 保存在本地，并在后续的请求中自动携带。

后端：检查登录状态

每当用户访问需要登录权限的页面时，浏览器会自动发送保存的 Cookie，后端可以通过检查 Cookie 来判断用户是否已登录。

if (req.method === 'GET' && req.url === '/check-login') {
  if (req.headers.cookie) {
    res.writeHead(200, {
      'Content-Type': 'application/json',
    });
    res.end(
      JSON.stringify({
        loggedIn: true,
        username: 'admin',
      })
    );
  } else {
    res.writeHead(200, {
      'Content-Type': 'application/json',
    });
    res.end(
      JSON.stringify({
        loggedIn: false,
        username: '',
      })
    );
  }
}

在这段代码中，后端检查请求头中的 cookie 字段。如果 Cookie 中有 user 信息，表示用户已登录，后端返回 loggedIn: true，否则返回 loggedIn: false。

Cookie 的安全性与使用建议

尽管 Cookie 非常方便，但在处理敏感数据时，我们需要格外注意安全性。以下是一些提高 Cookie 安全性的常见做法：

  • Secure 属性：通过设置 Secure 属性，确保 Cookie 只能通过 HTTPS 协议发送，避免中间人攻击。
  • HttpOnly 属性：添加 HttpOnly 属性后，浏览器的 JavaScript 无法访问 Cookie，减少了 XSS 攻击的风险。
  • SameSite 属性：设置 SameSite 属性可以防止跨站请求伪造（CSRF）攻击，限制 Cookie 的跨站点访问。

总结

Cookie 在 Web 开发中仍然是实现用户会话管理的核心技术之一。通过本文的讲解，我们展示了如何使用 Cookie 在前端存储用户的登录状态，并在后端进行会话验证。虽然 Cookie 非常方便，但使用时需要注意其安全性，尤其是在处理敏感数据时。掌握 Cookie 的工作原理，并结合安全策略，能帮助你更高效地管理用户会话，同时保证应用的安全性。

avatar
文章
阅读
粉丝