JHipster index.html页面即使在注销后也会显示“您以用户身份登录”

时间:2018-01-17 07:09:38

标签: angular jhipster

我现在很困扰这个问题。

如果我登录,然后点击'设置'或'实体',然后点击'退出',主页仍然说我已登录。导航栏还会显示'实体'菜单和设置,会话菜单选项。 跟踪代码,似乎home.component中的ngOnInit(this.principal.identity())在服务器上的注销完成之前触发。 有没有办法告诉home.component等待。

这是在navbar.component中调用注销的地方:

logout() {
    this.collapseNavbar();
    this.loginService.logout();
    this.router.navigate(['']);
}

这是loginService上的注销:

logout() {
    this.authServerProvider.logout().subscribe();
    this.principal.authenticate(null);
}

这是auth-session服务中的authService提供程序实现:

logout(): Observable<any> {
    // logout from the server
    console.log('logout from the server: ');
    // this.http.get(SERVER_API_URL + 'api/account', (() => {}, () => {});
    return this.http.post(SERVER_API_URL + 'api/logout', {}).map((response: Response) => {
        // to get a new csrf token call the api
        this.http.get(SERVER_API_URL + 'api/account').subscribe(() => {}, () => {});
        return response;
    });
}

这是home.component中的ngOnInit

    ngOnInit() {
    this.principal.identity().then((account) => {
        this.account = account;
    });
    this.registerAuthenticationSuccess();
}

这是身份函数,后者又调用getAccount rest endpoint

    identity(force?: boolean): Promise<any> {
    if (force === true) {
        this.userIdentity = undefined;
        this.authenticated = false;
    }

    // check and see if we have retrieved the userIdentity data from the server.
    // if we have, reuse it by immediately resolving
    if (this.userIdentity) {
        return Promise.resolve(this.userIdentity);
    }

    // retrieve the userIdentity data from the server, update the identity object, and then resolve.
    return this.account.get().toPromise().then((account) => {
        if (account) {
            this.userIdentity = account;
            this.authenticated = true;
        } else {
            this.userIdentity = null;
            this.authenticated = false;
        }
        this.authenticationState.next(this.userIdentity);
        return this.userIdentity;
    }).catch((err) => {
        this.userIdentity = null;
        this.authenticated = false;
        this.authenticationState.next(this.userIdentity);
        return null;
    });
}

我已经添加了一些断点,并且在服务器上完成注销之前会调用api / account调用。然后,在home.component ngOnInit中再次调用api / account,并且因为它在注销完成之前设法从服务器获取auth详细信息,所以它会在主页上显示一条消息,说明您已登录。

我会非常感谢任何指针,想法和想法。

1 个答案:

答案 0 :(得分:0)

我想我找到了一个解决方案,抱歉,我对UI很陌生,所以对于经验丰富的专业人士来说这可能是个新闻:)

我如上所述离开了auth-session.service。

我更改了navbar.component以使用Promise:

logout() {
    this.collapseNavbar();
    this.loginService.logout().then((response) => this.router.navigate(['']))
}

并且login.service更改为具有Promise,它将等待注销:

logout() {
    return new Promise((resolve, reject) => {
        this.authServerProvider.logout().subscribe((data) => {
            this.principal.identity(true).then((account) => {
                resolve(data);
            });
        }, (err) => {
            reject(err);
         });
    });
  }
}

如果您退出,主页现在显示清洁。这可以作为增强功能添加到JHipster中。 另外,感谢these authors and this page for the inspiration