получить роль пользователя из базы данных на основе идентификатора пользователя в угловых

Question

Я использую «службу авторизации», чтобы сохранить все функции аутентификации пользователя.Когда пользователь проходит аутентификацию, я получаю идентификатор пользователя и извлекаю соответствующую запись из таблицы базы данных, но мне не удается получить значение поля «роль».Код, который я использую в конструкторе, таков:

constructor(
    private _firebaseAuth: AngularFireAuth,
    private db: AngularFireDatabase,
    private router: Router) {
    this.user = _firebaseAuth.authState;

    this.user.subscribe(
        (user) => {
            if (user) {
                this.userDetails = user;

                this.userEmail = this.userDetails.email;
                this.uid = this.userDetails.uid;

                this.getUserRole(this.uid).subscribe(result => {
                    this.role = result.role;
                    console.log('role >>>>>>>>>>>>>', this.role);
                });

                console.log('uid >>>>>>>>>>>>>', this.uid);
                console.log('role >>>>>>>>>>>>>', this.role);
            }
            else {
                this.userDetails = null;
            }
        }
    );
}

getUserRole(userId: string): Observable<any> {
    return this.db.list('users', ref => ref.orderByChild('uid').equalTo(this.uid)).valueChanges()
        .map(result => result[0]);
}

this.uid имеет правильное значение, но this.role не определено.

Я полагаю, проблема в том, что вызовТаблица базы данных является асинхронной.Как я могу получить это значение?

Answer 1

Я добавил некоторый код, чтобы вы могли понять обратные вызовы наблюдаемого.Посмотрите на это.

this.currUser.subscribe(
        (val) => {
            // This is called as success callback
            this.role = val[0].role;
           // perform task using this.role. You should be writing your code here.
        },
        (error) => {
                // This is called as error callback, It will be executed if any erorrs were thrown from `currUser()`
                // log if there are any errors here
        },
        () => {
            // This is called as complete block
            // This will be executed after success callback or the error callback.
        }
);

ОБНОВЛЕНИЕ:

this.user.subscribe(
    (user) => {
        if (user) {
            this.userDetails = user;

            this.userEmail = this.userDetails.email;
            this.uid = this.userDetails.uid;

            this.getUserRole(this.uid).subscribe(result => {
                this.role = result.role;
                console.log('role >>>>>>>>>>>>>', this.role);       // print log 1
            });

            // log 2 will be executed before log 1 this is due to asynchronous behaviour
            console.log('role >>>>>>>>>>>>>', this.role);           // print log 2
        }
        else {
            this.userDetails = null;
        }
    }
);

журнал 2 будет выполнен перед журналом 1, это связано с асинхронным поведением.Если вы думаете, что ваш код выполняется последовательно с номерами строк, то вы ошибаетесь.getUserRole - асинхронный метод.

Вы также можете получить доступ к this.role из других компонентов, используя get или set.Что бы вы ни делали, это уместно.

То, что вы должны делать, - это извлекать this.role, только если оно не определено.

Во внешнем компоненте, к которому вы пытаетесь получить доступ this.role,сначала проверьте undefined, а затем получите доступ к нему.

некоторый другой компонент .ts

if(this.role != undefined){
 let role = this.role
}

DEMO: проверьте здесь , чтобы увидеть, как работают асинхронные методы

Answer 2

Я создал следующую функцию в пользовательской службе:

getUserRole(userId: string): Observable<any> {
    return this.db.list('users', ref => ref.orderByChild('uid').equalTo(userId)).valueChanges()
        .map(result => result[0]);
}

, затем я получил идентификатор пользователя в компоненте:

get uid(): string {
    return this.authService.uid;
}
set uid(value: string) {
    this.authService.uid = value;
}

и вызвал функцию в onNgInit ():

ngOnInit() {
    if (this.uid != undefined) {
        let uid = this.uid;

        this.userService.getUserRole(this.uid).subscribe(result => {
                    this.role = result.role;
        });
    }
}

Наконец я использовал *ngIf="role == '<role>' в html-шаблоне

Answer 3

Вы не можете получить доступ к переменной вне метода .subscribe (), поместите ее в подписку

 this.currUser.subscribe(val => {
    this.role = val[0].role;
    console.log(this.role);
});