работа с Angular (v7.2) и Firebase Auth для создания простого веб-приложения с областью пользователей. Я установил приборную панель в отдельный модуль со своим собственным маршрутизатором. У меня есть служба, которая выполняет большую часть тяжелой работы для аутентификации, которая распределяется между всеми компонентами.
Я не уверен, что это лучший способ, но мой файл auth.service.ts выглядит следующим образом:
export class AuthService {
private userData$ = new Subject();
private userData;
public userDataObs = this.userData$.asObservable();
constructor(public afs: AngularFirestore, public afAuth: AngularFireAuth, public functions: AngularFireFunctions, public router: Router, public ngZone: NgZone) {
this.afAuth.authState.subscribe((user) => {
if(user) {
this.userData = user;
this.getCurrentUserAccessLevel().subscribe((result) => {
let userAccessLevel = result.result;
let userObj = {
displayName: this.userData.displayName,
email: this.userData.email,
emailVerified: this.userData.emailVerified,
phoneNumber: this.userData.phoneNumber,
photoURL: this.userData.photoURL,
uid: this.userData.uid,
accessLevel: userAccessLevel
}
this.userData$.next(userObj);
});
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
...
Короче говоря, служба выбирает пользовательские данные из службы аутентификации Firebase и сохраняет их в свойстве userData. Затем он выбирает accessLevel, который является пользовательским утверждением в аутентификации Firebase, и объединяет его с некоторыми полями в userData для создания пользовательского объекта userObj. Затем userObj передается субъекту userData $, для которого есть наблюдаемые userDataObs.
Каждый компонент подписывается на userDataObs.
В главном dashboard.component.ts есть:
export class DashboardComponent {
private userDataObs;
private userData;
private loaded: boolean = false;
constructor(public authService: AuthService, public router: Router, public ngZone: NgZone) {
this.authService.userDataObs.subscribe((data) => {
this.userData = data;
this.loaded = true;
})
}
}
, который просто подписывается на userDataObs в authService. В главном компоненте панели мониторинга есть меню с различными привязками router к другим компонентам, которые обслуживаются через выход-маршрутизатор в компоненте. Если я щелкаю ссылку на другой компонент, маршрут меняется, и компонент инициализируется, но наблюдаемое не загружается. Там нет сообщения об ошибке или что-нибудь - просто ничего:
приборная панель-profile.component.ts:
export class DashboardProfileComponent {
private userDataObs;
private userData;
private loaded: boolean = false;
private fileUploadEvent;
private fileUploadProgress;
private fileUploadURL;
constructor(private authService: AuthService, private router: Router, private uploadService: UploadService) {
console.log('constructor');
this.authService.userDataObs.subscribe((data) => {
this.userData = data;
this.loaded = true;
console.log('loaded');
});
}
Если, однако, я просто иду к маршруту, не нажимая на routerLink, он работает нормально.
Я полагаю, это как-то связано с разделением наблюдаемого? В идеале мне бы хотелось, чтобы дочерние компоненты каким-то образом наследовали наблюдаемое от dashboard.component, но из того, что я могу сказать, это невозможно, поэтому мне нужно настроить новую подписку.
Буду признателен за любую помощь! Спасибо!