角度身份验证信号在登录时起作用，但在注销时不起作用

Question

我有一个组件，可以像这样显示登录状态：

{{loggedIn()}}

.ts代码如下：

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, WritableSignal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { RouterOutlet } from '@angular/router';
import { CompanyLoginComponent } from './company-login/company-login.component';
import { AuthService } from './auth.service';
import { AsyncPipe } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';


@Component({
    selector: 'app-company-facing',
    standalone: true,
    imports: [
        MatToolbarModule,
        MatButtonModule,
        MatIconModule,
        RouterOutlet,
        CompanyLoginComponent,
        AsyncPipe,
        MatSidenavModule,
    ],
    templateUrl: './company-facing.component.html',
    styleUrl: './company-facing.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [AuthService,]

})
export class CompanyFacingComponent {

    constructor(private auth: AuthService,
        private cdr: ChangeDetectorRef,
    ) {
    }

    get loggedIn() {
        return this.auth.loggedIn;
    }

    async logout() {
        await this.auth.logout();
    }
    forceChangeDetection() {
        this.cdr.detectChanges(); // Where cdr is ChangeDetectorRef injected in your constructor
    }
}

这是我的身份验证服务：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { signal, WritableSignal } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {


  loggedIn: WritableSignal<boolean> = signal(false);

  constructor(
    private http: HttpClient,
  ) {
    this.loggedIn.set(!!localStorage.getItem('accessToken'));
  }

  async login(email: string, password: string) {
    let res = await firstValueFrom(
      this.http.post<{ access_token: string }>('https://api.self-serve.just-solve.com/api/login',
        {
          email,
          password
        })
    )
    console.log(res);
    if (res.access_token) {
      this.loggedIn.set(true);
      console.log("logged in updated to true!");
      //FIXME: wHY NOT WORKING CHANGE DETECTION on company-facing.component.ts??? when it log out, it works, when log in, it stays stuck and you have to refresh page ç_ç
    }

    console.log(this.loggedIn())
    localStorage.setItem('accessToken', res.access_token);
    return res;
  }


  async logout() {
    try {
      let res = await firstValueFrom(
        this.http.post('https://api.self-serve.just-solve.com/api/logout', {})
      );
      this.loggedIn.set(false);
    }
    catch (e) {
      console.error(e);
    }

    localStorage.removeItem('accessToken');
  }
}

问题是：当我注销时，登录显示正确切换为 false。 当我登录时，它保持为 true，我必须刷新页面才能更新。 怎么会？我怎样才能让它在登录时更新而不是仅在注销时更新？

Answer 1

我认为你应该在信号中使用 compulated 属性。 像这样： 在身份验证服务中

#loggedIn = signal(false);
loggedIn = computed(this.#loggedIn);

用途：

this.auth.loggedIn()