如何在Angular中裁剪或移除URL中的data参数并隐藏敏感数据

你当前的实现用queryParams传敏感数据存在天然的安全隐患，参数会完整暴露在URL、浏览器历史、访问日志中，哪怕加密也存在被泄露破解的风险，针对你的两个需求推荐以下方案：

方案1：使用Angular路由State传参（推荐，Angular 7+支持） #

该方案数据存储在浏览器会话内存中，完全不会出现在URL、sources标签、历史记录里，目标页面可正常获取数据，URL仅保留干净的路由地址。

发送组件代码修改 #

send(){
  // 可按需保留加密逻辑
  const transferData = btoa(JSON.stringify(data));
  this.router.navigate(['/customerportal/insta-pay/insurance-plan'], {
    // 用state替代queryParams传参
    state: { data: transferData }
  })
}

目标组件接收数据 #

ngOnInit(){
  // 从全局history对象获取路由传递的state数据
  const encryptedData = history.state?.data;
  if(encryptedData){
    // 解密还原原始数据执行业务逻辑
    const originData = JSON.parse(atob(encryptedData));
    // 后续业务处理
  } else {
    // 无合法数据的兜底逻辑，例如跳转回表单页
    this.router.navigate(['/your-form-path'])
  }
}

使用该方案后跳转的URL为：http://localhost:4200/customerportal/insta-pay/insurance-plan，没有任何查询参数，完全满足你两个需求。

方案2：共享服务传参（兼容低版本Angular） #

如果你的Angular版本低于7不支持路由state，可以用全局共享服务临时存储数据，同样不会在URL中暴露参数。

1. 新建全局共享服务 #

// data-transfer.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {
  // 临时存储数据，内存级存储页面刷新会清空
  private tempData: string | null = null;

  setData(data: string): void {
    this.tempData = data;
  }

  getData(): string | null {
    const data = this.tempData;
    // 读取后立即清空避免数据残留
    this.tempData = null;
    return data;
  }
}

2. 发送组件注入服务传值 #

constructor(
  private router: Router,
  private dataTransferService: DataTransferService
) {}

send(){
  const transferData = btoa(JSON.stringify(data));
  this.dataTransferService.setData(transferData);
  // 跳转时不带任何查询参数
  this.router.navigate(['/customerportal/insta-pay/insurance-plan'])
}

3. 目标组件取值 #

constructor(
  private dataTransferService: DataTransferService
) {}

ngOnInit(){
  const encryptedData = this.dataTransferService.getData();
  if(encryptedData){
    const originData = JSON.parse(atob(encryptedData));
    // 业务逻辑处理
  } else {
    // 兜底逻辑
  }
}

额外说明 #

你的第一个需求裁剪URL中data参数后半段没有实际意义，裁剪后参数不完整无法解析还原数据，使用以上两个无参传参方案可以同时解决URL过长、参数暴露的两个问题，不需要再对URL做额外裁剪处理。

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