嗨我正在用@ angular / fire构建一个角度应用程序。在auth服务中,我有一个user observable,它获取当前用户的值(如果用户已通过身份验证),如果用户未经过身份验证,则返回null值。
export class AuthService {
user$: Observable<User>;
constructor(private afAuth: AngularFireAuth, private afs:
AngularFirestore) {
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
} else {
return of(null);
}
})
)
}
它位于服务的构造函数中,因此注入服务的所有组件都可以看到用户$ variable.Now假设我有一个导航,根据用户是否经过身份验证显示不同的按钮。
<ul>
<!-- user IS NOT logged in -->
<li *ngIf="!(authService.user$ | async)">
This is visible if user is NOT logged in
</li>
<!-- user IS logged in -->
<li *ngIf="authService.user$ | async" fxHide.xs>
This is visible if user IS logged in
</li>
</ul>
用户$ observable在开始时为空并且需要一些时间来获取值,这意味着即使用户被记录,在模板中“如果用户未登录则这是可见的”将在之前呈现几秒钟。 observable获取当前用户的值,然后切换到另一个li标签。有没有更好的方法来检查经过身份验证的用户以防止这种情况?注意我不能使用路由保护,因为我不想阻止整个页面,但只有一些条件逻辑按钮和一些其他元素之间。这是一个重复的问题:Angular 6 AngularFireAuth check if user is logged in before page rendered,我没有找到答案。提前致谢
在auth服务中添加组件可以订阅的主题并等待一些响应
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class AuthService {
userAccessSubject = new Subject();
user$: Observable<User>;
constructor(private afAuth: AngularFireAuth, private afs:
AngularFirestore) {
this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
this.userAccessSubject.next(this.afs.doc<User>(`users/${user.uid}`).valueChanges());
} else {
this.userAccessSubject.next(null);
}
})
)
}
getUserAccess() {
return this.userAccessSubject.asObservable();
}
}
在组件中,从订阅块获取userAccess
constructor() {
// Here add code to enable loader
this.authService.getUserAccess()
.subscribe(userAccessResponse => {
this.userAccess = userAccessResponse;
// Hide loader
})
}