Question

在我的示例Angular 2应用程序中，我使用ngrx / store来实现redux设计模式。

我已在我的应用程序中实现了CanActivate guard，下面是相关代码

canActivate(route: ActivatedRouteSnapshot, router: RouterStateSnapshot): Observable<boolean> {

    this.store.dispatch(canActivate()); 
    // HOW TO RETURN value ??
}

以下是相关行动

export function canActivate(): Action {
$.blockUI();
return {
    type: UserActionTypes.CAN_ACTIVATE,
    payload:{}
  }
}

export function canActivateSuccess(canActivateResponse: any): Action {
$.unblockUI();
return {
    type: UserActionTypes.CAN_ACTIVATE_SUCCESS,
    payload: canActivateResponse.data
  }
}

以下是相关的缩减代码

....
case UserActionTypes.CAN_ACTIVATE_SUCCESS:           
        return Object.assign({}, action.payload);
.....

及以下是相关效果代码

 @Effect() canActivate$ = this.actions$
        .ofType(UserActionTypes.CAN_ACTIVATE)
       .switchMap(
       (action) => this.userService.canActivate()
           .map(response => canActivateSuccess)
        );

我的问题是，canActivate后卫应该返回布尔值的Observable，但无论是返回true还是false，只会在canActivateSuccess函数/动作中知道，在这种情况下我应该如何从canActivate guard返回一个值。

Answer 1

您可以与$actions.ofType(..)一起返回take(1)：

canActivate(route: ActivatedRouteSnapshot, router: RouterStateSnapshot): Observable<boolean> {
    this.store.dispatch(canActivate()); 
    return this.this.actions$
        .ofType(UserActionTypes.CAN_ACTIVATE_SUCCESS)
        .map(payloadToBoolean...);
}

需要注意的事项：对于此解决方案，您必须确保在CAN_ACTIVATE_SUCCESS运行时没有其他this.userService.canActivate() - 操作发出。否则，这可能会意外触发警卫。

使用CanActivate guard中的store.dispatch

1 个答案: