Angular 为什么在用户登录和注销时未更新标头模板中可观察到的isLoggedIn？

My

AppModule

导入一个

CoreModule

@NgModule({
  providers: [
    LoginService
  ],
})
export class CoreModule {

它本身在全球范围内提供

登录服务

@Injectable()
export class LoginService {

    constructor(
        private router: Router,
        private authService: AuthService
    ) { }

    login(username: string, password: string) {
        this.authService.login(username, password).subscribe(
            response => {
                this.router.navigate(['users']); // TODO Check that all router.navigate don't use hard coded strings
            },
            error => {
                console.log(error);
            }
        );
    }

    logout() {
        this.authService.logout().subscribe(
            response => {
                this.router.navigate(['login']);
            },
            error => {
                console.log(error);
            }
        );
    }

}

还有一个

AuthService

，用于服务器端登录或注销，并将登录状态保存在浏览器本地存储中

public isAuthenticated(): Observable<boolean> {
  if (this.tokenService.accessTokenExpired()) {
    if (this.tokenService.refreshTokenExpired()) {
      return of(false);
    } else {
      return this.refreshAccessToken()
      .pipe(
        map(response => {
          if (response) {
            return true;
          }
        }),
        catchError((error, caught) => {
          return of(false);
        })
      );
    }
  }
  return of(true);
}

登录

布局：

@Component({
  selector: 'app-login-layout',
  template: `<router-outlet></router-outlet>`
})
export class LoginLayoutComponent { }

@Component({
  selector: 'app-home-layout',
  templateUrl: './home.layout.component.html'
})
export class HomeLayoutComponent { }

使用其模板：

<mat-sidenav-container class="example-container">
  <mat-sidenav #drawer mode="side" opened role="navigation">
    <mat-nav-list>
      <a mat-list-item routerLink='/first'>First Component</a>
      <a mat-list-item routerLink='/second'>Second Component</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header></app-header>
  </mat-sidenav-content>
  <router-outlet></router-outlet>
</mat-sidenav-container>

第一部分
第二部分

我发现

的身份验证存在问题。每次它总是返回新的
可观察的
。您应该有一个
可观察的
，通过它可以通知所有
订阅

授权服务
注意：我没有涵盖代币，但你可以用你现在的方式处理它

订阅$isLoggedIn并检查您是否能够在ts文件中获取通知。
isAuthenticated
方法发送http？或者它是一个
主题
？@Nour我在问题中添加了方法源代码。@SunilSingh我应该在哪个方法中使用subscribe实现？似乎您有
变更检测
问题，我猜angular在
注销
调用后没有得到更改，所以异步管道确实被调用了。尝试在
isAuthenticated
方法中添加控制台日志。并检查它是否被调用。您在此处看到多个可观察对象吗？在
isAuthenticated（）
-
中返回（false）其他地方也一样。每次它都会创建新的可观察对象。如果不使用（false）的任何
，您将如何对此进行编码
then？
this.authSubject.next（false）
很抱歉，这个
返回这个.authSubject.next（false）//（假）已停止编译。什么是
authSubject
变量？
@Component({
  selector: 'app-login-layout',
  template: `<router-outlet></router-outlet>`
})
export class LoginLayoutComponent { }

@Component({
  selector: 'app-home-layout',
  templateUrl: './home.layout.component.html'
})
export class HomeLayoutComponent { }

<mat-sidenav-container class="example-container">
  <mat-sidenav #drawer mode="side" opened role="navigation">
    <mat-nav-list>
      <a mat-list-item routerLink='/first'>First Component</a>
      <a mat-list-item routerLink='/second'>Second Component</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header></app-header>
  </mat-sidenav-content>
  <router-outlet></router-outlet>
</mat-sidenav-container>

    private authSubject = new BehaviorSubject<boolean>(false);
    private isLoggedIn$ = this.authSubject.asObservable();

    updateLoggedInState(status: boolean){
        this.authSubject.next(status);
    }

    public isAuthenticated(): Observable<boolean> {
         return this.isLoggedIn$;
    }

@Injectable()
export class LoginService {

    constructor(
        private router: Router,
        private authService: AuthService
    ) { }

    login(username: string, password: string) {
        this.authService.login(username, password).subscribe(
            response => {
                this.router.navigate(['users']); // TODO Check that all router.navigate don't use hard coded strings
             this.authService.updateLoggedInState(true);
            },
            error => {
                console.log(error);
                this.authService.updateLoggedInState(false);
            }
        );
    }

    logout() {
        this.authService.logout().subscribe(
            response => {
                this.router.navigate(['login']);
                this.authService.updateLoggedInState(false);
            },
            error => {
                console.log(error);
            }
        );
    }

}