根据角度中的用户ID从数据库中获取用户角色

Question

我正在使用“身份验证服务”来保留所有用户身份验证功能。当用户通过身份验证时，我得到用户的 id 并从数据库表中获取相关记录，但我无法获取“角色”字段的值。我在构造函数中使用的代码是这样的：

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

您不能在 .subscribe() 方法之外访问变量，请将其放在 subscribe 中

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

Answer 2

我添加了一些代码让你理解 observable 的回调。看看吧。

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;
        }
    }
);

log 2 将在 log 1 之前执行，这是由于异步行为。如果您认为您的代码按行号顺序执行，那么您就错了。 getUserRole 是异步方法。

您也可以使用get 或set 从其他组件访问this.role。做什么都是合适的。

您应该做的是仅在未定义的情况下获取this.role。

在您尝试访问this.role 的外部组件中，首先检查undefined，然后再访问它。

其他组件.ts

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

演示： 查看here 了解异步方法的工作原理

Answer 3

我在用户服务中创建了如下函数：

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

然后我在组件中获得了用户 ID：

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;
        });
    }
}

最后我在html模板中使用了*ngIf="role == '<role>'