登录是前端做全栈的必修课

如何在前端实现自动或无感化的登录态管理，包括用户注册、登录、接口校验登录态以及实现自动化请求时自动携带访问令牌。我们将探讨两种常见的实现方式：使用 HTTP Cookie 和前端存储和发送访问令牌。

1. 注册和登录

首先，用户需要通过注册和登录来获取访问令牌。

1.1 注册接口

在注册接口中，用户提供必要的注册信息（如用户名和密码），服务器对用户进行验证并创建用户账户。

示例代码（Node.js + Express）：

javascript 复制代码

// 注册接口
app.post('/register', async (req, res) => {
  try {
    const { username, email, password } = req.body;

    // 检查用户名和邮箱是否已被注册
    if (users.some(user => user.username === username)) {
      return res.status(400).json({ error: '用户名已被注册' });
    }

    if (users.some(user => user.email === email)) {
      return res.status(400).json({ error: '邮箱已被注册' });
    }

    // 使用bcrypt对密码进行哈希处理
    const hashedPassword = await bcrypt.hash(password, 10);

    // 创建新用户对象
    const user = {
      id: Date.now().toString(),
      username,
      email,
      password: hashedPassword
    };

    // 将用户信息存储到数据库
    users.push(user);

    // 创建访问令牌
    const token = jwt.sign({ userId: user.id }, 'secretKey');

    res.status(201).json({ message: '注册成功', token });
  } catch (error) {
    res.status(500).json({ error: '注册失败' });
  }
});

1.2 登录接口

在登录接口中，用户提供登录凭据（如用户名和密码），服务器验证凭据的正确性并颁发访问令牌。

示例代码（Node.js + Express）：

javascript 复制代码

app.post('/login', (req, res) => {
  // 获取登录凭据
  const { username, password } = req.body;

  // 在此处进行用户名和密码的验证，如检查用户名是否存在、密码是否匹配等

  // 验证成功，颁发访问令牌
  const token = createAccessToken(username);

  // 将访问令牌写入 Cookie
  res.cookie('token', token, {
    httpOnly: true,
    secure: true, // 仅在 HTTPS 连接时发送 Cookie
    sameSite: 'Strict' // 限制跨站点访问，提高安全性
  });

  // 返回登录成功的响应
  res.status(200).json({ message: '登录成功' });
});

2. 接口校验登录态

在需要校验登录态的受保护接口中，服务器将校验请求中的登录凭据（Cookie 或访问令牌）的有效性。

示例代码（Node.js + Express）：

javascript 复制代码

app.get('/protected', (req, res) => {
  // 从请求的 Cookie 中提取访问令牌
  const token = req.cookies.token;

  // 或从请求头部中提取访问令牌，如果采用前端存储和发送访问令牌方式
  // const token = req.headers.authorization.split(' ')[1]; // 示例代码，需根据实际情况进行解析

  // 检查访问令牌的有效性
  if (!token) {
    return res.status(401).json({ error: '未提供访问令牌' });
  }

  try {
    // 验证访问令牌
    const decoded = verifyAccessToken(token);

    // 在此处进行更详细的用户权限校验等操作

    // 返回受保护资源
    res.status(200).json({ message: '访问受保护资源成功' });
  } catch (error) {
    res.status(401).json({ error: '无效的访问令牌' });
  }
});

3. 自动化登录态管理

要实现自动或无感化的登录态管理，前端需要在每个请求中自动携带访问令牌（Cookie 或请求头部）。

当使用 HTTP Cookie 时，浏览器会自动将 Cookie 包含在每个请求的头部中，无需手动设置。

示例代码（前端使用 JavaScript）：

javascript 复制代码

// 发送请求时，浏览器自动携带 Cookie
fetch('/protected');
`````javascript
// 发送请求时，浏览器自动携带 Cookie
fetch('/protected');

3.2 前端存储和发送访问令牌

当使用前端存储和发送访问令牌时，前端需要在每个请求的头部中手动设置访问令牌。

示例代码（前端使用 JavaScript）：

javascript 复制代码

// 从存储中获取访问令牌
const token = localStorage.getItem('token');

// 设置请求头部
const headers = {
  'Authorization': `Bearer ${token}`
};

// 发送请求时，手动设置请求头部
fetch('/protected', { headers });

在上述示例代码中，我们使用了前端的 localStorage 来存储访问令牌，并在发送请求时手动设置了请求头部的 Authorization 字段。

请注意，无论使用哪种方式，都需要在服务器端进行访问令牌的验证和安全性检查，以确保请求的合法性和保护用户数据的安全。

补充说明：

createUser：自定义函数，用于创建用户账户并将其保存到数据库或其他持久化存储中。
createAccessToken：自定义函数，用于创建访问令牌。
verifyAccessToken：自定义函数，用于验证访问令牌的有效性。

写在最后

文章旨在答疑扫盲，内容简明扼要方便学习了解，请确保在实际应用中采取适当的安全措施来保护用户的登录凭据和敏感数据，保持学习，共勉~

登录是前端做全栈的必修课

1. 注册和登录

1.1 注册接口

1.2 登录接口

2. 接口校验登录态

3. 自动化登录态管理

3.1 使用 HTTP Cookie

3.2 前端存储和发送访问令牌

写在最后