Angular 12安全登录注册页实现：密码加密后对接Spring Boot后端

1. 密码加盐加胡椒+哈希的TypeScript适配 #

前置依赖安装 #

优先用生态成熟的crypto-js库，自带完善的TS类型支持：

npm install crypto-js @types/crypto-js --save

如果需要更高安全等级的bcrypt算法，可以安装对应TS版本：

npm install bcryptjs @types/bcryptjs --save

工具类实现 #

import * as CryptoJS from 'crypto-js';
// 胡椒值放在Angular环境变量中，和后端约定完全一致，生产环境构建时注入，不要硬写在业务代码里
const PEPPER = process.env['NG_APP_PEPPER'] || 'dev_test_pepper_123456';

export class PasswordSecurityUtil {
  // 生成用户唯一随机盐，注册时生成，同步传给后端存储
  static generateSalt(length: number = 16): string {
    return CryptoJS.lib.WordArray.random(length).toString();
  }

  // 加盐加胡椒后哈希，拼接顺序必须和后端完全统一
  static hashPassword(rawPassword: string, userSalt: string): string {
    const combinedStr = rawPassword + userSalt + PEPPER;
    return CryptoJS.SHA256(combinedStr).toString(CryptoJS.enc.Hex);
  }
}

重要提示：前端哈希仅为了避免密码明文传输，不能替代后端二次校验。后端拿到前端传的哈希值后，必须再做一次后端侧的加盐哈希处理再入库/校验，禁止直接存储前端传的哈希值。

2. Angular 对接Spring Boot HTTP请求实现 #

第一步：导入HTTP模块 #

在app.module.ts中引入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule, /* 其他模块 */]
})
export class AppModule { }

第二步：封装认证服务 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, switchMap } from 'rxjs';
import { PasswordSecurityUtil } from '../utils/password-security.util';

interface RegisterParams {
  username: string;
  salt: string;
  frontHashedPassword: string;
}

interface LoginParams {
  username: string;
  frontHashedPassword: string;
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly BASE_API = 'https://你的后端域名/api/auth';

  constructor(private http: HttpClient) {}

  // 注册逻辑
  register(username: string, rawPassword: string): Observable<any> {
    const userSalt = PasswordSecurityUtil.generateSalt();
    const hashedPwd = PasswordSecurityUtil.hashPassword(rawPassword, userSalt);
    return this.http.post(`${this.BASE_API}/register`, {
      username,
      salt: userSalt,
      frontHashedPassword: hashedPwd
    } as RegisterParams);
  }

  // 登录逻辑：先请求后端获取对应用户的盐，再哈希后提交校验
  login(username: string, rawPassword: string): Observable<any> {
    return this.http.get<{ salt: string }>(`${this.BASE_API}/user-salt/${username}`).pipe(
      switchMap(res => {
        const hashedPwd = PasswordSecurityUtil.hashPassword(rawPassword, res.salt);
        return this.http.post(`${this.BASE_API}/login`, {
          username,
          frontHashedPassword: hashedPwd
        } as LoginParams)
      })
    )
  }
}

对接注意事项 #

• 前后端必须统一：哈希算法、密码/盐/胡椒的拼接顺序、编码格式，否则会出现校验失败
• 所有接口必须走HTTPS，进一步降低传输窃听风险
• 后端获取用户盐的接口要做限流，避免被批量枚举用户名

3. 可选优化点 #

• 用Angular响应式表单实现前端密码强度校验，提前拦截弱密码
• 体积敏感的项目可以用浏览器原生Web Crypto API替代crypto-js，TS原生支持该API的类型定义
• 登录态用JWT或者Session存储，前端做好过期处理

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