如何在URL Angular 2中隐藏参数？

Question

我有一个主页，在其中单击一个按钮可转到另一个页面。我想在下一页中看到新的URL，但是我想从URL中隐藏“ usertoken”值。有人能帮我吗？我使用了skipLocationChange：true，但它隐藏了整个网址

export class HomepageComponent implements OnInit {

    token:any;
    a:string;
  constructor (public parkingService: ParkingService, public root:Router) { 

  }
  ngOnInit(){

  }

        pass(passa)
          {

        this.a= passa.value;
        this.parkingService.setUserToken(this.a);
        //const mikos=this.a.length;
        this.parkingService.getparkingDetails().subscribe(
          data=>
          {

        this.root.navigate(['/pages/iot-dashboard', { userToken: this.a} ]);

      },
      error => {
        window.alert("Παρακαλώ δώστε έγκυρο token για το χώρο στάθμευσης");
        console.error(error);
        this.root.navigate(['/pages/dashboard'] );

      },
      );
          }

Answer 1

从URL中删除它，并使用服务在组件之间传递数据

Answer 2

用户令牌应由加载到组件中的服务分配。

Answer 3

您可以使用角度验证enter link description here

或

从URL中删除它，并使用服务在组件之间传递数据

Answer 4

如果您愿意在导航期间传递数据而不在URL中显示数据，那么Angular可以为您提供帮助。他们仅针对这种情况创建了一个接口NavigationExtras。

我已经使用您的示例并创建了一个stackblitz example here。

1. 我正在HompPageComponent内使用navigationExtras，并通过路由传递userToken。
2. 我正在读取其userToken在其构造函数内的IotDashboardComponent内部。

[请注意，NavigationExtras使用本地存储来存储值，刷新浏览器后它将立即清除。建议将用户令牌存储在会话存储中。

希望对您有帮助。