如何在Angular中自动加密/解密URL查询参数？

核心思路 #

不要在每个组件中重复编写加解密逻辑，通过**自定义路由序列化器（UrlSerializer）**实现全局统一处理，既能自动加密URL中的查询参数，又能让组件通过ActivatedRoute直接获取解密后的原始参数，避免代码冗余。

具体实现步骤 #

1. 自定义UrlSerializer #

重写Angular默认的UrlSerializer，接管URL的解析与序列化过程，嵌入加解密逻辑：

import { UrlSerializer, UrlTree, DefaultUrlSerializer } from '@angular/router';

export class EncryptedUrlSerializer implements UrlSerializer {
  private defaultSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // 先解密URL中的查询参数，再交给默认解析器处理
    const decryptedUrl = this.decryptQueryParams(url);
    return this.defaultSerializer.parse(decryptedUrl);
  }

  serialize(tree: UrlTree): string {
    // 先让默认序列化器生成原始URL，再加密查询参数
    const originalUrl = this.defaultSerializer.serialize(tree);
    return this.encryptQueryParams(originalUrl);
  }

  private encryptQueryParams(url: string): string {
    const urlObj = new URL(url);
    for (const [key, value] of urlObj.searchParams.entries()) {
      urlObj.searchParams.set(key, this.encrypt(value));
    }
    return urlObj.toString();
  }

  private decryptQueryParams(url: string): string {
    const urlObj = new URL(url);
    for (const [key, value] of urlObj.searchParams.entries()) {
      urlObj.searchParams.set(key, this.decrypt(value));
    }
    return urlObj.toString();
  }

  // 替换为实际加密算法（生产环境禁用btoa，推荐AES）
  private encrypt(str: string): string {
    return btoa(str);
  }

  // 对应解密逻辑
  private decrypt(str: string): string {
    return atob(str);
  }
}

2. 注册自定义序列化器 #

在AppModule中替换默认的UrlSerializer，让全局路由生效：

import { NgModule } from '@angular/core';
import { UrlSerializer } from '@angular/router';
import { EncryptedUrlSerializer } from './encrypted-url-serializer';

@NgModule({
  providers: [
    { provide: UrlSerializer, useClass: EncryptedUrlSerializer }
  ]
})
export class AppModule { }

3. 路由跳转自动加密 #

使用Router服务跳转时，查询参数会自动被加密：

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToPost() {
  this.router.navigate(['/posts', '235645'], {
    queryParams: { asc: 1, published: true }
  });
  // 最终URL会自动转为加密形式，如 https://example.com/posts/235645?asc=MQ==&published=dHJ1ZQ==
}

4. 组件中直接获取原始参数 #

无需额外处理，通过ActivatedRoute.queryParams订阅即可拿到解密后的原始参数：

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.queryParams.subscribe(params => {
    // params 即为 { asc: '1', published: 'true' }，可直接用于API调用
    console.log(params);
  });
}

安全提示 #

• 禁止用btoa/atob作为生产环境加密方案，它们只是Base64编码而非真正加密，推荐使用AES对称加密，可借助crypto-js库实现。
• 加密密钥需通过环境变量注入，避免硬编码在代码中。

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