javascript - 为什么 AuthGuard 中的值没有更改为 false？

Question

在模板组件中AppComponent ，根据值，变量 this.loggedInService.isLoggedIn在 logIn() 之间切换和logout()方法，在应用程序组件 AppComponent 中是subscribe d 服务中的这些方法 LoggedinService并根据方法，将变量的值更改为 true或false .

也在守卫的方法中checkLogin (url: string)我回来true或false取决于变量 this.loggedInService.isLoggedIn 的值。

当我启动应用程序时，我无法进入模块，当我点击按钮时，我可以，但当我重复点击“退出”按钮时，我仍然可以进入模块。

如何切换到checkLogin以便认证正常工作并保存页面重启时切换输入输出状态的值？

**AppComponent.html:**

        <li class="nav-item">
            <a class="btn btn-outline-success"
               [class.btn-outline-success]="!this.loggedInService.isLoggedIn$"
               [class.btn-outline-danger]="this.loggedInService.isLoggedIn$"
               (click)="this.loggedInService.isLoggedIn$ ? logout() : logIn()">
                {{this.loggedInService.isLoggedIn$ ? 'Exit' : 'Enter'}}
            </a>
        </li>

**AppComponent.ts **

导出类 AppComponent 实现 OnInit { 消息:字符串；

constructor(public loggedInService: LoggedinService,
            public router: Router) {
    this.setMessage();
}

ngOnInit() {}

logIn(): void {
    this.loggedInService.login().subscribe(() => {
        if (this.loggedInService.isLoggedIn$) {
            let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
                '/gallery';
            this.router.navigate([redirect]);
        }
    });
}

logout(): void {
    this.loggedInService.logout();
}

}

登录服务:

export class LoggedinService {
isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
isLoggedIn$: Observable<boolean> = this.isLoggedIn.asObservable();
  redirectUrl: string;

  constructor() {}

  login(): Observable < boolean > {
    return of(true).pipe(
      delay(100),
      tap(val => this.isLoggedIn.next(true))
    );
  }

  logout(): void {
    this.isLoggedIn.next(false);
  }
}

AuthGuard:

export class AuthGuard implements CanActivate {
  constructor(
    private loggedInService: LoggedinService, 
    private router: Router
  ) {}

  canActivate(next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    let url: string = state.url;
    return this.loggedInService.isLoggedIn$;
  }

  checkLogin(url: string): boolean {
    if (this.loggedInService.isLoggedIn) {
      return true;
    } else {
      this.loggedInService.redirectUrl = url;
      return false;
    }
  }
}

Answer 1

isLoggedIn在你的LoggedinService是一种原始数据类型。所以它不是通过引用传递的。它是按值传递的。因此，如果某个地方发生了更改，则相同的更改不会反射(reflect)在使用它的其他地方。

此行为仅由对象表现出来，因为它们是通过引用而不是值传递的。

您可以使用BehaviorSubject来解决这个问题。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { Router } from '@angular/router';

import { delay, tap } from 'rxjs/operators';

@Injectable()
export class LoggedinService {

  isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  isLoggedIn$: Observable<boolean> = this.isLoggedIn.asObservable();
  redirectUrl: string;

  constructor(private router: Router) { }

  login(): Observable<boolean> {
    this.isLoggedIn.next(true);
    return this.isLoggedIn$;
  }

  logout(): Observable<boolean> {
    this.isLoggedIn.next(false);
    return this.isLoggedIn$;
  }

}

现在，而不是 isLoggedIn类型 boolean ，你会得到isLoggedIn$类型 Observable你必须 subscribe to，获取用户的登录状态。

你必须.subscribe至this.loggedInService.login()和this.loggedInService.login()在您的 AppComponent 中，因为它们都返回 isLoggedIn$ 。您必须创建一个本地 isLoggedIn属性并将其分配给 .subscribe 中返回的任何内容。然后，您可以根据此 isLoggedIn 的模板设置按钮文本和单击处理程序。属性。

在 AuthGuard 的例子中，因为守卫可以返回 Observable<boolean>或Promise<boolean>或boolean ，您可以简单地return this.loggedInService.isLoggedIn$

这是一个Sample StackBlitz供您引用。