如何开发带有Cookie认证的单页面应用？

1. 在服务器端实现 Cookie 认证机制，该机制使用一个唯一的标识符来识别已登录的用户。可以使用 Node.js 和 Express 来实现此机制。

代码示例：

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();

app.use(cookieParser());
app.use((req, res, next) => {
  const { cookies } = req;

  if ('sid' in cookies) { // 判断是否存在 sid Cookie
    const userId = sessions[cookies.sid]; // 根据 sid 从 sessions 对象中获取用户 ID

    if (userId) {
      req.userId = userId; // 将用户 ID 添加到请求对象中
    }
  }

  next();
});

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const userId = authenticateUser(username, password); // 认证用户并返回用户 ID

  if (userId) {
    const sid = uuidv4(); // 生成一个随机的唯一标识符

    res.cookie('sid', sid, { // 将 sid 添加到响应的 Cookie 中
      httpOnly: true,
      secure: true
    });

    sessions[sid] = userId; // 将 sid 与用户 ID 关联
    res.sendStatus(200);
  } else {
    res.sendStatus(401);
  }
});

app.get('/user', (req, res) => {
  const { userId } = req;

  if (userId) {
    const user = getUser(userId); // 根据用户 ID 获取用户数据
    res.json(user);
  } else {
    res.sendStatus(401);
  }
});

2. 在客户端使用 JavaScript 库来管理 Cookie，以便在发出请求时发送 Cookie。

代码示例：

import Cookies from 'js-cookie';

const getUser = async () => {
  const response = await fetch('/user', {
    headers: {
      Authorization: `Bearer ${Cookies.get('accessToken')}` // 在请求头中添加 Authorization 字段，并将 access token 添加到其中
    }
  });

  if (response.ok) {
    const user = await response.json();
    return user;
  } else {
    throw new Error('Unable to fetch user data');
  }
};

使用此方法，我们可以在 Web 应用程序中实现基于 Cookie 的用户身份验证。