Question

成功登录后，我将用户添加到ngrx状态。登录后将同一用户添加到状态。从配置文件页面部分更新用户详细信息并使用Object.assign{}替换状态后，将旧状态替换为新数据，但在该操作之后页面将自动重定向。

我尽力纠正代码。页面会自动将我重定向到我的主页。我没有在任何地方使用任何router.navigate('')。

我正在使用：ngrx / store =＆gt; v.4.0.4

以下是减速器，动作和效果的代码：

effects.ts

@Effect()
    userUpdate$ = this.actions$
        .ofType(AuthActions.USER_UPDATE)
        .map((action: AuthActions.userUpdate) => action.payload)
        .mergeMap(response => 
          this.authService.retrieveLoggedUser(response.uid, response.token) //will get the user details
            .map(res => {
                var resObj = { user: res };
                return resObj;
            }).switchMap(user =>new UserActions.loadUserUpdate(resObj.user) //returns new action to update the user in state
            )
            .catch((error: any) => {
                return of(new UserActions.loadUserFailure(error));
            })
        );

我可以使用Object.assing{}更新状态，在状态中获取正确的值但页面被重定向。

是的我确实有auth警卫，只有通过警卫才能访问个人资料页面，因此只有经过身份验证的用户才能访问他们的个人资料页面。

控制台中没有错误。 dispatch事件成功执行，并使用新数据更新状态。

我的routing.ts如下所示：

const appRoutes: Routes = [
    { path: '', component: HomepageComponent, },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'user/updateprofile', component: EditProfileComponent, canActivate: [AuthGuard] },
    { path: '**', redirectTo: 'pagenotfound' }
];

构造函数（私有数据库：数据库，私有路由器：路由器，私有存储器$：存储，私有spinnerService：SpinnerService）{ this.spinnerService.show（）; }

verifyTheUser(): Observable<boolean> {
    return this.db.query('user').map(user => user).take(1);
}

authGuard.ts

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.verifyTheUser().map(res => {
            if (res != undefined && res != null && res['user'] != undefined && res['user'] != null) {
                if (res['user'].uid != 0) {
                    this.isLoggedIn = true;
                } else if (res['user'].uid == 0) {
                    this.isLoggedIn = false;
                }
            }
            console.log(this.isLoggedIn);

            return this.isLoggedIn;
        });

    }

userUpdate的效果

  userUpdate$ = this.actions$
            .ofType(AuthActions.USER_UPDATE)
            .map((action: AuthActions.userUpdate) => action.payload)
            .mergeMap(response => this.authService.retrieveLoggedUser(response.uid, response.token)
                .map(res => {
                   var resObj = { user: {user: res, id: response.id } };
                    return resObj;
                }).switchMap(response =>
                    this.db.insert('user', [response.user])
                        .map(() => new UserActions.loadUserUpdate(response.user))
                )
                .catch((error: any) => {
                   return of(new UserActions.loadUserFailure(error));
                })
            );

我正在使用Observer进行保存以获取更改检测以在屏幕上反映它，是因为观察者代码我被重定向？ this.profileObserver.next（数据）;

profilecomponent.ts

 UpdateTheProfileInfo(requestData) {
    this.loading = true;
    this.auth.updateInfo(requestData, this.uid).subscribe(() => {
this.UpdateTheUser();
    }, error => {
console.log(error);
    });
  }

  UpdateTheUser() {
    if (this.uid != undefined && this.uid != null && this.keyID != undefined && this.keyID != null) {
      this.store$.dispatch(new AuthActions.userUpdate({ uid: this.uid, token: this.token, id: this.keyID }));
    }

Answer 1

因此，您可以在评论中使用按钮类型为submit的表单进行登录。

因此，您必须在表单上使用(submit)处理程序绑定，并使用submit - eventhandler调用的方法来阻止使用event.preventDefault()的默认行为。

使用object.assign {}更新ngrx状态，状态更新后，页面将自动重定向

1 个答案: