在Angular 2中将敏感和长数据从一个组件传递到另一个组件答案

【问题标题】：Passing the sensitive and long data from one component to another in Angular 2在Angular 2中将敏感和长数据从一个组件传递到另一个组件
【发布时间】：2018-01-02 18:14:44
【问题描述】：

我有一个页面，用户将在其中输入用户名和密码。在其下方有一个表格，用户将在其中选择几行并在选定的行中输入输入数据。

页面如下所示：

现在，用户点击下一个按钮（在表格之后）数据将转移到新页面。我创建了onClickAction() 方法

为此，我使用了路线。我创建了 Routes.forRoot() 并将数据传递为：

imports: [BrowserModule,
  FormsModule,
   RouterModule.forRoot([
     { path: 'main-page', component: MainPageComponent },
     { path: 'exe/:template', component: ExecutionComponent },
   ])
 ],

我应该在 onClickAction() 中输入什么来传递用户名密码 url 和用户选择的行？

在 url 中传递凭据和此类大数据是否正确？

【问题讨论】：

您能不能只允许用户在将密码发送到服务器之前在最后一页输入密码？
我不确定通过 url 传递所有敏感数据是否是个好主意，您可以做的是在 onClickAction() 上填充存储在共享服务中的模型实例并在任何地方使用该共享服务您想访问该信息
@RoddyoftheFrozenPeas 必须在第一页传递数据。
@JayDeeEss 您可以提供任何参考吗？我试过了，但没有用！
try this

标签： angular angular2-routing

【解决方案1】：

如果数据不敏感并且只有很少的参数要传递，在路由之间传递数据的方便选项是使用查询参数（数据将在查询字符串中传递）。

在触发导航的组件函数中（即：你的 onClickAction()）：

let navigationExtras: NavigationExtras = {
        queryParams: {
            "couldName": this.cloudName,
            "jobName": this.jobName
        }
    };
    this.router.navigate(["page2"], navigationExtras);

在您导航的组件中（即：page2 组件）：

public constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
        this.cloudName= params["couldName"];
        this.jobName= params["jobName"];
    });

但是，由于您有用户名和密码等敏感数据以及需要传递的数据很复杂（不是一两个参数），您可以编写一个可注入到您需要的组件的提供程序。

提供者：

import { Injectable } from '@angular/core';
@Injectable()
export class DataProvider {
    public data: any;
    public constructor() { }
}

在 page1 组件中：

import { DataProvider } from "../../providers/dataProvider";
-------
-------
public constructor(private router: Router, private dataProvider: DataProvider) {}
public onClickAction() {
      this.dataProvider.data= {
         "userName": this.userName,
         "password": this.password,
         "wsdlUrl":this.url,
         ---------
         ---------
         }
       this.router.navigate(["page2"]);
}

在 page2 组件中

import { DataProvider } from "../../providers/dataProvider";
-------
-------
public constructor(private dataProvider: DataProvider) {
        console.log(this.dataProvider.data.userName);
}

详情请参阅this 文章。

【讨论】：