Как сохранить последний маршрут, когда пользователь перенаправлен на вход в систему - через Ngrx Effect angular - PullRequest
0 голосов
/ 08 апреля 2019

Предположим, что пользователь заходит на http://sample.com/dashboard, затем проверяет охрану входа в систему, и он не входит в систему и перенаправляет его на страницу входа. Я хочу получить его последний маршрут (в этом примере http://sample.com/dashboard) и, когда он вошел в систему, перенаправить его на маршрут. Я только что сделал это с Ngrx Effect, но ...

    @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])
    })
  );

Ответы [ 3 ]

0 голосов
/ 08 апреля 2019

Например, вы можете создать службу, которая будет отслеживать историю вашего маршрута.

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

И вы можете интегрировать его с вашим государственным управлением.

0 голосов
/ 14 апреля 2019

На самом деле я нашел ответ:

1 - Добавьте routerReducer к вашему интерфейсу состояния:

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

2 - Init routerReducer в объекте редукторов:

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

3 - Создать интерфейс RouterSatetUrl:

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

4 - Создать CustomSerializer:

@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 - Создать FeatureSelector, чтобы получить текущий маршрут в любое время:

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();
    })
  );
0 голосов
/ 08 апреля 2019

Попробуйте с помощью history.back ()

Привет! * * 1003

...