使用来自 CanActivate 守卫的 store.dispatch

Posted 2023-02-19

【中文标题】使用来自 CanActivate 守卫的 store.dispatch

【英文标题】：Use store.dispatch from CanActivate guard

【发布时间】：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 守卫返回值。

【参考方案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 发出。否则这可能会意外触发守卫。