在 NGXS 中解码 SSL 并更新状态

Question

我正在学习 NGXS 并尝试重构一个显示 SSL 证书信息以便于访问的材料表。 我已经能够从我们的 API 成功获取 CertificateObject，但我不确定如何解码证书和更新状态。

这是我的状态模型：

export interface CertificateStateModel {
  certificate: CertificateObject;
  certificates: Certificate[];
  searchLimitedStateMessage: string;
  emptyCertificateMessage: string;
  searchTerm: any;
}

@State<CertificateStateModel>({
  name: "certificate",
  defaults: {
    certificate: null,
    certificates: [],
    searchLimitedStateMessage: SearchMessages.typeToSearch,
    emptyCertificateMessage: SearchMessages.typeToSearch,
    searchTerm: null,
  },
})

这是我获取所有证书的操作：

  @Action(CertificateAction.GetAllCertificates)
  getAllCertificates(
    ctx: StateContext<CertificateStateModel>,
    action: CertificateAction.GetAllCertificates
  ) {
    ctx.dispatch(new Busy(true));
    return this.svc.getAllCertificates().pipe(
      tap((certificate) => {
        ctx.patchState({
          certificate
        });
        ctx.dispatch(new Busy(true));
        console.log(certificate)
      },
      (error: any) => {
        ctx.dispatch([
          new DisplayMessage({type: "error", list: [ "Get All Certificates Error", error.error ]}),
          new Busy(false)
        ]);
      })
    );
  }

证书对象如下所示：

{
    "id": "12345",
    "name": "accountName",
    "certificates": [
        {
            "publicCertificate": "EncodedCertHere",
            "id": "12345",
            "name": "atest"
        },
        {
            "publicCertificate": "EncodedCertHere",
            "id": "12345",
            "name": "btest"
        }
    ]
}

我的问题是如何解码证书并将其设置为状态模型上的证书 [] 属性？

作为参考，这是我在使用 matTableDataSource 之前解码证书的方式：

 this._integrationAccountService.getCertificates().subscribe(response => {
      this.data = [];
      if (response.certificates) {
          for (let entity of response.certificates) {

            const certPem = atob(entity.publicCertificate)
            const cert = pki.certificateFromPem(certPem)
            const fingerprint = forge.md.sha1.create().update(forge.asn1.toDer(forge.pki.certificateToAsn1(cert)).getBytes()).digest().toHex();
            const currentDate = new Date();
            const daysToExpire = cert.validity.notAfter.valueOf() - currentDate.valueOf();

              let row: CertificateRow = {
                  name: entity.name,
                  issueDate: cert.validity.notBefore,
                  expiryDate: cert.validity.notAfter,
                  fingerPrint: fingerprint,
                  serialNumber: cert.serialNumber,
                  daysToExpire: daysToExpire / 86400000,
              }
              this.data.push(row);
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      this.dataSource.filterPredicate = (data: any, filter:string): boolean=> {
        //"data" here is the value of the "row"
        return data.name.toLowerCase().includes(filter);
      };
    })
  }

任何帮助我指明正确方向的帮助都会很棒。 我一直在关注 NGXS 网站上的文档，但所有示例都非常简单，我在杂草中迷失了方向。

Answer 1

1. 只是一个 nit 选择，但尝试使用动作生命周期而不是为微调器/加载器等设置状态......请参阅： https : //github.com/ngxs-labs/actions-executing

2. 我会使用您已经使用的任何代码来解码证书，然后将其设置为您的状态，应该很容易。

function decodeCert(cert: CertificateObject) {
 ... *decoding cert code*
}

////

@Action(CertificateAction.GetAllCertificates)
getAllCertificates(
  ctx: StateContext<CertificateStateModel>,
  action: CertificateAction.GetAllCertificates
) {
  // ctx.dispatch(new Busy(true)); <-- See Point 1
  return this.svc.getAllCertificates().pipe(
    tap((certificate) => {
      ctx.patchState({
        certificate: decodeCert(certificate), // <-- See Point 2
      });
      // ctx.dispatch(new Busy(true)); <-- See Point 1
      console.log(certificate)
    },
    (error: any) => {
      ctx.dispatch([
        new DisplayMessage({type: "error", list: [ "Get All Certificates Error", error.error ]}),
        // new Busy(false) <-- See Point 1
      ]);
    })
  );
}

@Selector([CertificateState])
getCerts(state: CertificateState){
  return ... get your data rows here...
}

材料表非常擅长它的功能，但你必须跳过几个箍才能让它工作。 不确定你的观点是什么样的，所以我只是想看看

table-wrapper.ts

@Select(CertificateState.getCerts) data$: Observable<T>;

table-wrapper.html

<app-table data="data$ | async"></app-table>

table.html

<table mat-table [dataSource]="dataSource">
<!-- contents -->
</table>

table.ts

// one way to set the incoming datasource
@Input() public set data(value: T) {
    this.dataSource.data = value;
}

// another way to set the incoming data source
@Input() data: T[];
ngOnChanges(): void {
    this.dataSource.data = this.data;
}