Загрузите сущность после входа в систему и перейдите к entityID - PullRequest
Новая
       17

Загрузите сущность после входа в систему и перейдите к entityID

0 голосов
/ 16 февраля 2019

Поток:

После успешного входа пользователя приложение должно загрузить пользователей Vendor и перейти к VendorID

Пример: myUrl.com / vendor / ID

Различные случаи, которые я пытаюсь поддержать:

1.Пользователь добавляет URL-адрес с идентификатором поставщика:

Приложение перезагрузит поставщика

2.После входа в систему

приложение загрузит поставщика и перейдет к URL

3.При обновлении

Приложение будет перезагружать Vendor и перемещаться только в том случае, если URL-адрес VendorID уже не существует (таким образом, пользователь останется на той же странице, на которой он уже находится)

Моя проблема:

Когда пользователь обновляет приложение, он будет повторно перемещен к корневому поставщику (не хорошо, я хочу, чтобы он оставался на своей странице, переход только по логину)

Код, который я пробовал до сих пор: 

 @Effect()
  loadVendor(): Observable<VendorDataInitAction | AuthAction | VendorDataAction> {
    return this._actions$
      .pipe(
        ofType<AuthLoginSuccessAction | AuthRefreshSuccessAction>(AuthActions.LoginSuccess, AuthActions.RefreshSuccess),
        withLatestFrom(this._store.select(selectAuthActor)),
        filter(([_, actor]) => isUserLoggedIn(actor)),
        switchMap(([_, actor]) => {
          const errorActions = [
            new AuthSetAuthMessageAction({
              message: 'You need to be granted access in order to login to Portal.\n' +
                'Please contact your Platterz representative.',
              type: AuthMessageType.Error
            }),
            new AuthLogoutAction()
          ];

          return this._apollo
            .query<AssociatedRestaurants>({
              query: AssociatedRestaurantsQuery
            })
            .pipe(
              switchMap((result): ObservableInput<AuthAction | VendorDataAction> => {
                const errors = result.errors && result.errors.length > 0;
                const noRestaurants = !(result.data && result.data.associatedLocations &&
                  result.data.associatedLocations.locations.length);

                if (errors || noRestaurants) {
                  return errorActions;
                }

                return [
                  new VendorDataInitAction(result.data.associatedLocations.locations)
                ];
              }),
              catchError(() => errorActions)
            );
        }));
  }

  @Effect()
  navigateToVendorOnDataLoad(): Observable<VendorDidSetIDURLAction> {
    return this._actions$
      .pipe(
        ofType<VendorDidSetIDURLAction>(VendorDataActions.Init),
        withLatestFrom(this._route.params.pipe(map((params) => params.vendorID))),
        filter(([, vendorId]) => vendorId == null),
        switchMap(() => this._store.select(selectCurrentVendor)),
        filter((vendor) => !!vendor),
        take(1),
        map((vendor) => {

// When trying to get Route params, and navigate only if VendorID is null, Its always null...

          this._router.navigate(['/vendors', vendor.id, 'dashboard']);

          return new VendorDidSetIDURLAction();
        })
      );
  }

Я пытался получить доступ к Route params на @ Effect безуспешно, он не содержит VendorID при обновлении ...

Как можно получить Route params из @ Effect ?Или есть лучший способ архивации этой логики?

1 Ответ

0 голосов
/ 21 февраля 2019

Публикация моего решения для всех, кто сталкивается с подобной проблемой.

Кажется, что параметры URL иногда недоступны из @ Effects (в частности, при обновлении)Поэтому вместо этого я использовал локальное хранилище.

Процесс выглядит следующим образом:

  1. По умолчанию приложение всегда будет переходить к входу страница, если у вас нет параметров URL (введите URL базового приложения)

  2. Любой компонент аутентификации имеет защиту CanActive , которая проверяет состояние входа в систему, есливойдя в систему, переходит к текущему поставщику, если нет, то будет отображаться вход .

Первый маршрут: 

{ path: '', redirectTo: 'auth', pathMatch: 'full' },
  {
    path: 'auth',
    component: AuthPageComponent,
    canActivate: [AppLoggedOutGuard],
    children: [
      { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
      {
        path: 'sign-in',
        component: LoginPageComponent
      },
      {
        path: 'sign-up',
        data: { signUpBenefits },
        component: VendorSignUpComponent
      }
    ]
  },

LoggedOut guard 

@Injectable()
export class AppLoggedOutGuard extends AppRoleGuard implements CanActivate {
  constructor(
    store: Store<IAppState>,
    router: Router,
    private _appAuthService: AppAuthService
    ) {
    super(router, store);
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    return this._user$
      .pipe(
        take(1),
        switchMap(() => this._appAuthService.getLoggedInState()),
        map((isLoggedIn) => {
          if (isLoggedIn) {
            this._navigateToVendor();

            return false;
          }

          return true;
        })
      );
  }

  private _navigateToVendor(): void {
    this._store.select(selectCurrentVendor)
      .pipe(
        filter((vendor) => !!vendor),
        take(1)
      ).subscribe((vendor) => {
        this._router.navigate(['/vendors', vendor.id, 'dashboard']);
      });
  }
}

Для извлечения дополнительных данных вы можете использовать распознаватель в базовом компоненте поставщика (или вашей организации)

...