0

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

我尝试了各种可能性来纠正代码。页面自动将我重定向到我的主页。我没有在任何router.navigate('')地方使用过。

我正在使用：ngrx/store=> 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{}，在状态中获取正确的值，但页面会被重定向。

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

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

我的 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));
                })
            );

我在保存时使用观察者来获取更改检测以在屏幕上反映它，是因为观察者代码我被重定向了吗？this.profileObserver.next(data);

配置文件组件.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 }));
    }
4

1 回答 1

0

因此，在评论中，您使用的是带有按钮类型的表单submit来登录。

因此，您必须(submit)在表单上使用处理程序绑定以及由submit-eventhandler 调用的方法，以防止使用event.preventDefault().

于 2017-10-09T07:50:03.243 回答