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

Question

流量：

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

示例： myUrl.com/vendor/ID

我尝试支持的不同情况：

1.用户将其 URL 与供应商 ID 放在一起：

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

2。登录后

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

3。刷新时

应用程序将重新加载供应商，并且仅在 URL 不存在供应商 ID 时才进行导航（因此用户将停留在他已经在的同一页面上）

我的问题：

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

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

 @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 参数但没有成功，它不包含 VendorID刷新时...

如何从 @Effect 获取 Route 参数？或者有没有更好的方法来归档这个逻辑？

Answer 1

为遇到类似问题的其他人发布我的解决方案。

似乎 URL 参数有时无法从 @Effects 访问（特别是在刷新时）所以我改用本地存储。

流程如下：

默认情况下，如果您没有任何 URL 参数（输入 base应用程序 URL)
任何 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']);
      });
  }
}

要获取额外数据，您可以在供应商（或您的实体）基础组件上使用解析器

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

Load entity after login, and navigate to entityID

angular

typescript

angular-routing

ngrx

ngrx-effects