在Angular应用程序中,有可能需要多个组件或服务使用相同的认证逻辑,这可能会导致代码冗余和混乱。为了解决这个问题,我们可以创建一个AuthService服务,该服务负责处理所有关于认证的事务,并将认证状态observable化。这样,在应用程序中的任何地方,我们都可以轻松地订阅这个observable并获取当前认证状态。
下面是一个基本的AuthService示例:
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private loggedIn: BehaviorSubject = new BehaviorSubject(false);
constructor() {}
get isLoggedIn(): Observable {
return this.loggedIn.asObservable();
}
login() {
this.loggedIn.next(true);
}
logout() {
this.loggedIn.next(false);
}
}
在这个示例中,我们使用一个名为loggedIn的BehaviorSubject来保存认证状态,该状态初始值为false。我们还暴露了一个名为isLoggedIn的observable,以便在组件或服务中订阅当前认证状态。最后,我们还创建了两个方法来更新认证状态:login方法用于将loggedIn设置为true,logout方法用于将其设置为false。
现在,我们可以在任何地方注入AuthService,并订阅它的isLoggedInobservable。例如,我们可以在AppComponent中使用AuthService:
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
loggedIn = false;
constructor(private authService: AuthService) {}
ngOnInit() {
this.authService.isLoggedIn.subscribe((loggedIn) => {
this.loggedIn = loggedIn;
});
}
login() {
this.authService.login();
}