登录后加载实体，然后导航到entityID

Question

流：

用户成功登录后，应用程序应加载用户Vendor并导航到VendorID

示例：myUrl.com/vendor/ID

我试图支持的不同情况：

1.用户将URL添加到供应商ID：

应用程序将重新加载供应商

2.登录后

应用程序将加载供应商并导航到URL

3.刷新时

应用程序将重新加载供应商，并且只有在VendorID不存在URL时才会导航（因此用户将保持在他已经在的同一页面上）

我的问题：

当用户刷新应用程序时，他将被重新导航到root供应商（不好，我希望他留在他的页面上，仅在登录时导航）

我到目前为止已尝试过的代码：

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

我尝试在@Effect上访问Route params但没有成功，刷新时它不包含VendorID ...

如何从@Effect获取Route params？或者有更好的归档方法吗？

Answer 1

发布我的解决方案，让任何其他人碰到类似的问题。

似乎从@Effects无法访问URL参数（特别是在刷新时）因此我使用了本地存储。

流程如下：

1. 默认情况下，如果您没有任何URL参数，应用程序将始终导航您登录页面（输入基本应用程序URL）
2. 任何auth组件都有一个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警卫

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

要获取额外数据，您可以在Vendor（或您实体）基础组件上使用解析程序