如何在刷新时在身份验证保护中获取用户和购物车数据?

Question

我在斯巴达克斯店面CheckoutAuthGuard时遇到问题。当在结帐过程中的任何页面上按下浏览器刷新按钮时，由于缺少用户和购物车信息，警卫会将我重定向到登录名。

我用过这样的CustomCheckoutAuthGuard：

import { Injectable } from '@angular/core';
import {CanActivate, Router} from '@angular/router';
import {
ActiveCartService,
AuthRedirectService,
AuthService,
RoutingService,
User,
UserToken,
} from '@spartacus/core';
import { combineLatest, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import {CheckoutConfigService} from '@spartacus/storefront';
@Injectable()
export class CustomCheckoutAuthGuard implements CanActivate {
constructor(
protected routingService: RoutingService,
protected authService: AuthService,
protected authRedirectService: AuthRedirectService,
protected checkoutConfigService: CheckoutConfigService,
protected activeCartService: ActiveCartService,
private router: Router
) {}
canActivate(): Observable<boolean> {
return combineLatest([
this.authService.getUserToken(),
this.activeCartService.getAssignedUser(),
]).pipe(
map(([token, user]: [UserToken, User]) => {
if (!token.access_token) {
if (this.activeCartService.isGuestCart()) {
return Boolean(user);
}
if (this.checkoutConfigService.isGuestCheckout()) {
this.router.navigate(['checkout-login']);
} else {
this.routingService.go({ cxRoute: 'login' });
}
this.authRedirectService.reportAuthGuard();
}
return !!token.access_token;
})
);
}
}

它与斯巴达克斯的默认CheckoutAuthGuard非常相似。我还为所有相关结帐组件切换了此保护：

CheckoutOrchestrator: {
component: CheckoutOrchestratorComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard, CheckoutGuard],
},
CheckoutProgressMobileTop: {
component: CheckoutProgressMobileTopComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard],
},
CheckoutProgressMobileBottomComponent: {
component: CheckoutProgressMobileBottomComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard]
},
CheckoutProgress: {
component: CheckoutProgressComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard]
},
CheckoutDeliveryMode: {
component: DeliveryModeComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard, ShippingAddressSetGuard]
},
CheckoutPlaceOrder: {
component: PlaceOrderComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard]
},
CheckoutReviewOrder: {
component: ReviewSubmitComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard]
},
CheckoutShippingAddress: {
component: ShippingAddressComponent,
guards: [CustomCheckoutAuthGuard, CartNotEmptyGuard, CheckoutDetailsLoadedGuard]
}

但是在刷新时，来自ActiveCartService的用户undefined，并且this.activeCartService.isGuestCart()返回undefined。

这都是为了客人结账，不幸的是，我无法判断登录用户的行为。这是因为我们使用CDC，而目前CDC存在一个错误，任何刷新都会重定向到主页，因此完全绕过了此保护。有关此问题的更多信息，请单击此处。

有人可以给我建议在这里尝试什么最好吗？也许某些购物车状态需要与本地存储同步，或者combineLatest在这里rxjs功能是错误的？还是别的什么？提前感谢！

Answer 1

这是一个已知问题，在斯巴达克斯 3.0 版本中已修复，您可以在此处看到我们打开的问题。目前没有计划将此更改反向移植到 3.0 之前的版本。

该问题是由于在装载推车之前运行防护检查造成的。

如果您在 3.0 之前需要此解决方案，我建议您使用它的自定义版本覆盖开箱即用CheckoutAuthGuard。您应该将this.activeCartService.isStable()值添加到combineLatest流中，并在"购物车稳定"上filter。在这里你可以明白我的意思。

以下是应如何提供自定义防护，以便它替换默认防护：

(在 app.module.ts 或 AppModule 中导入的其他模块中)

providers: [
...,
{
provide: CheckoutAuthGuard,
useClass: CustomCheckoutAuthGuard, //or whatever your guard class is named
}
]