0

初始化应用程序时，我想已经加载用户（假设 localStorage 中有一个令牌）。我遵循了本指南https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/但我现在不知道如何将它与 ngxs 结合起来，尤其是用我的设置。

该函数在应用程序初始化时调用：

  initializeApp() {
    const token = localStorage.getItem('token');
    if (token) {
      this.store.dispatch(new CheckSession(token));

   //hold the user
    }
  }

行动

@Action(CheckSession)
checkSession(sc: StateContext<SessionStateModel>, { payload }: CheckSession) {
sc.patchState({
  isLoading: true,
  token: payload
});

this.sessionService.checkSession()
  .subscribe(response => {
    sc.dispatch(new CheckSessionSuccess(response));
  }, error => {
    sc.dispatch(new CheckSessionFailed(error));
  });
}

我正在链接状态中的操作，我希望我的应用程序先完成整个操作链，然后再继续应用程序。

这是可能的还是我做错了？

4

2 回答 2

2

基于代码执行的异步性质，请考虑以下方法：

  • 使用仅显示某种加载指示器的“正在加载”路由/页面/组件启动您的应用程序。
  • 订阅它会相应ofActionSuccessful()地CheckSessionXxx改变路由/页面/组件。
  • 调度CheckSession。此操作的结果将由上一步处理。
  • 如果没有令牌，则相应地更改路由/页面/组件。

这个想法是在渲染 UI 之前避免“等待进程完成”。相反，始终根据当前状态呈现 UI（例如，它正在加载...）。由于异步操作导致应用程序状态发生变化，因此响应式更新 UI 。

这不是编码解决方案，而是建议改变设计/思维 - 否则您将在许多情况下尝试“等待”（恕我直言，就像与“系统”作斗争）。希望这可以帮助。

于 2018-06-25T00:04:16.713 回答
0

我认为你应该使用 AuthGuard 来实现它，

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private _auth: AuthService, private _store: Store) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this._isAuthenticated$.pipe(
            map(a => {
                if (a) {
                    return true;
                }
                this._store.dispatch(new CheckSession(state.url));
                return false;
            })
        );
    }

    @Select(AuthState.isAuthenticated)
    private _isAuthenticated$: Observable<boolean>;
}

然后在实际调用组件之前使用它。您可以查看以下示例repository。

于 2018-06-23T13:13:31.720 回答