我的变量一直返回到默认布尔值,我的订阅不会从可观察值处理



我是Angular/Node.js的初学者,我正在做一个项目作为实践。我遇到了一个使用订阅和可观察对象的身份验证问题。

当我的身份验证工作时,我试图在成功的身份验证上可视化地隐藏我的登录/注册按钮,并显示一个注销按钮。

我使用'*ngIf="userIsAuthenticated"'来显示我的注销和'*ngIf="!userIsAuthenticated"'来隐藏注册/登录按钮。

在我的authService类文件中,我有这个:

private authStatusListener = new Subject<boolean>();
constructor(private http: HttpClient, private router: Router) {}
getAuthStatusListener() {
return this.authStatusListener.asObservable();}
login(email: string, nickname: null, password: string ) {
const authData: AuthData = {
email: email,
nickname: nickname,
password: password,
};
this.http
.post<{token: string}>(BACKEND_URL + '/login', authData)
.subscribe((response) => {
const token = response.token;
this.token = token;
this.authStatusListener.next(true);
this.router.navigate(["/"]);
});}

在我的组件。ts文件中,我有这样的:

private authListenerSubs: Subscription;
userIsAuthenticated = false;
constructor(
private authService: AuthService,
public reviewService: ReviewService)
ngOnInit() {
this.authListenerSubs = this.authService
.getAuthStatusListener()
.subscribe((isAuthenticated) => {
console.log('testing if this runs');
console.log(this.userIsAuthenticated);
this.userIsAuthenticated = isAuthenticated;
console.log(this.userIsAuthenticated);
});
console.log(this.userIsAuthenticated);
this.authListenerSubs = this.authService
.getAuthStatusListener()
.subscribe();}

我放了一堆控制台。查看变量行为的日志。此外,您可能还会注意到看似无用的代码this.authListenerSubs = this.authService .getAuthStatusListener() .subscribe();但是如果这段代码不低于那段代码,我的订阅方法中的日志都不会因为某种原因而不执行,我不知道为什么会出现这种情况,也不知道这些事情是如何相关的。

主要问题是……userIsAuthenticated不会被更新。我的日志显示,该值开始时应该是false,然后更改为true,但是当它完成订阅时,它立即返回false值,即使它不应该被更改,我也没有将其更改回false。

有谁能帮帮我吗?

Subject不存储该值。这就是为什么每次订阅后的过程就像从头开始一样。你应该用BehaviorSubject来代替

你可以在这里阅读更多关于它们的区别

最新更新