Vue登录处理：仅校验HTTP状态码是否足够？

仅通过HTTP状态码判断登录结果的安全性确实不足，以下是几种可行的校验方案：

1. 校验响应数据的结构完整性 #

即使后端返回200状态码，也必须确保响应包含预期字段且格式正确，避免接收无效或篡改的数据。

示例代码修改：

async submit() {
  try {
    const d = await fetch(config.apiUri + "sign-in", {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'omit',
        body: JSON.stringify(this.data),
    });
    const j = await d.json();

    // 用d.ok覆盖所有2xx成功状态码，替代硬编码200
    if (!d.ok) {
      this.errorMsg = j.message || '登录失败';
      console.log(this.errorMsg);
      return;
    }
    
    // 强制校验token的存在性与格式
    if (!j.token || typeof j.token !== 'string' || j.token.trim() === '') {
      this.errorMsg = '无效的登录令牌';
      return;
    }
    
    accessHelper.setToken(j.token, this.mys);
    accessHelper.setAuth = true;
    this.$router.push("/");          
  } catch(err) {
    console.log("Something went wrong", err);
    this.errorMsg = '网络请求失败';
  }
}

2. 前端预校验JWT合法性 #

在存储JWT之前，前端可以对令牌做基础校验，提前拦截无效、过期或伪造的令牌：

• 校验JWT格式是否符合三段式Base64结构
• 解析Payload检查过期时间（exp字段）
• 验证签发者（iss）、受众（aud）是否与预期一致

示例代码（需引入jwt-decode库）：

import jwtDecode from 'jwt-decode';

async submit() {
  // ... 前面的请求代码 ...
    
    // 校验token结构后，添加JWT预校验
    try {
      const decodedToken = jwtDecode(j.token);
      // 检查令牌是否过期
      const currentTime = Date.now() / 1000;
      if (decodedToken.exp < currentTime) {
        this.errorMsg = '令牌已过期，请重新登录';
        return;
      }
      // 校验签发者是否为预期的后端服务
      if (decodedToken.iss !== config.apiUri) {
        this.errorMsg = '无效的令牌来源';
        return;
      }
    } catch (err) {
      this.errorMsg = '无效的令牌格式';
      return;
    }
    
    // 后续存储令牌逻辑 ...
}

3. 采用统一响应格式约定 #

前后端约定统一的业务响应结构，优先通过业务字段判断结果，而非仅依赖HTTP状态码：

• 成功响应：{ success: true, data: { token: "xxx" } }
• 失败响应：{ success: false, message: "错误信息" }

示例代码：

async submit() {
  try {
    const d = await fetch(config.apiUri + "sign-in", { /* 请求配置 */ });
    const j = await d.json();

    // 优先校验业务状态字段
    if (!j.success) {
      this.errorMsg = j.message || '登录失败';
      console.log(this.errorMsg);
      return;
    }

    // 再校验数据结构完整性
    if (!j.data?.token || typeof j.data.token !== 'string') {
      this.errorMsg = '登录响应格式错误';
      return;
    }
    
    // 后续逻辑 ...
  } catch(err) { /* 异常处理 */ }
}

4. 响应数据签名校验（进阶） #

如果对安全性要求极高，后端可以对响应体进行HMAC签名，前端使用预存的密钥重新计算签名并比对，确保响应未被篡改。比如后端在响应头返回X-Signature字段，前端用相同算法（如SHA256）结合密钥对响应体计算签名，与X-Signature一致才继续处理。

5. 语义化状态码匹配校验 #

调整后端状态码的使用（当前409用于登录失败不符合HTTP语义，建议用401 Unauthorized表示身份验证失败），前端结合状态码和响应内容双重校验，比如收到401时，确认响应中的错误信息确实是身份验证相关的，避免因其他原因返回401时误判。

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