使用来自 CanActivate 守卫的 store.dispatch答案

【问题标题】：Use store.dispatch from CanActivate guard使用来自 CanActivate 守卫的 store.dispatch
【发布时间】：2017-07-26 09:54:02
【问题描述】：

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

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

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
  }
}

下面是相关的reducer代码

....
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 守卫应该返回 boolean 的 Observable ，但是返回 true 还是 false ，只有在 canActivateSuccess 函数/动作中才能知道，在这种情况下，我应该如何从 canActivate 守卫返回值。

【问题讨论】：

标签： angular redux ngrx ngrx-effects

【解决方案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...);
}

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

【讨论】：