当用户重定向到登录时如何保持最后的路由 - 通过 Ngrx 效果角度

Question

>假设用户转到 http://sample.com/dashboard 然后登录保护检查，他没有登录并将他重定向到登录页面。我想获取他的最后一个路由(在本例中为 http://sample.com/dashboard(，当他登录时将他重定向到该路由。我只是用Ngrx效果做了，但是...

    @Effect()
  getUserLoginData$: Observable<Action> = this.actions$.pipe(
    ofType(userActions.GET_USER_DATA),
    switchMap(() => {
    return this.sessionService.getLoggedInUserInfo().pipe(
        map((success) => new userActions.GetUserDataSuccessAction(success)),
        catchError((error) => of(new uerActions.GetUserDataFailAction(error)))
      );
    })
  );
  @Effect({dispatch: false})
  public userLoginDataSuccess$: Observable<Action> = this.actions$.pipe(
    ofType(userActions.GET_USER_DATA_SUCCESS),
    map((action: userActions.GetUserDataSuccessAction) => action),
    tap((data) => {
      if (data.url.includes('login'))
        this.router.navigate([RouteMap.DASHBOARD])
      else
        this.router.navigate([data.url])
    })
  );

Answer 1

例如，您可以创建一个服务来跟踪您的路线历史记录。

previousUrl: string;
constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  });
}

您可以将其与您的状态管理集成。

Answer 2

实际上，我找到了它的答案：

1-将路由器减速器添加到您的状态接口：

    export interface State {
         ...
         routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
    }

2-初始化路由器减速器中的减速器对象：

    export interface State {
      ...
      routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
    }

3-创建路由器SatetUrl接口：

    export interface RouterStateUrl {
      url: string;
      params: Params;
      queryParams: Params;
    }

4-创建自定义序列化程序：

    @Injectable()
    export class CustomSerializer implements fromRouter.RouterStateSerializer<RouterStateUrl> {
      serialize(routerState: RouterStateSnapshot): RouterStateUrl {
        const {url} = routerState;
        const {queryParams} = routerState.root;
    
        let state: ActivatedRouteSnapshot = routerState.root;
        while (state.firstChild) {
          state = state.firstChild;
        }
        const {params} = state;
    
        return {url, params, queryParams};
      }
    }

5-创建一个功能选择器，以便随时获取当前路线：

    export const getRouterState = createFeatureSelector<fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer');

6-最后一步是使用getRouterState，您要在其中获取路由信息。例如，我在我的一个效果中使用它：

    @Effect({dispatch: false})
      public userLoginDataSuccess$: Observable<Action> = this.actions$.pipe(
        ofType(userActions.GET_USER_DATA_SUCCESS),
        map((action: userActions.GetUserDataSuccessAction) => action),
        tap(() => {
          let getRouterState$ = this.store.select(fromRoot.getRouterState).subscribe((data) => {
            if (!data.state || data.state.url.includes('login') || data.state.url == '/' || data.state.url == '') {
              this.router.navigate([RouteMap.DASHBOARD])
            } else {
              this.router.navigate([data.state.url])
            }
          });
    
          getRouterState$.unsubscribe();
        })
      );

Answer 3

尝试使用 history.back((

问候！