RxJS是一个比
我刚开始学习Angular。如果我使用Firebase进行用户授权，那么使用Promise还是Observable更好？
如果我尝试通过Facebook登录时出现错误，我需要如何更改URL：
无法加载URL:此URL的域不包括在应用程序域列表中。若要下载此URL，请在应用程序设置中的"域"字段应用程序中添加应用程序的所有域和子域。
Promises更灵活、更强大的异步编程框架。也就是说，在使用Firebase API时，最好使用Observables或Promises。
AngularFire是为了更容易地将Firebase集成到Angular项目中而开发的。AngularFire API使用Observables而不是Promises，因为RXJS是事实上的Angular异步编程标准。
如果您想为Firebase提供自己的RXJSAPI，一个选项是创建一个Angular服务。下面的示例显示了如何包装返回Promise<UserCredential>的Firebase函数signInWithCustomToken，并将其转换为返回Observable<UserCredential>。
firebase-auth.service.ts
import { Injectable, Optional } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import * as firebase from 'firebase/app'
import 'firebase/auth'
import { BehaviorSubject } from 'rxjs'
import { concatMap } from 'rxjs/operators'
@Injectable({
providedIn: 'root'
})
export class FirebaseAuthService {
public app: firebase.app.App;
public auth: firebase.auth.Auth;
public user$: BehaviorSubject<firebase.User> = new BehaviorSubject(null);
// Note: FirebaseConfig is a class to enable injecting the Firebase app
// initialization params when providing the service in app.module.ts.
constructor(@Optional() fb_config: FirebaseConfig, private http: HttpClient) {
// https://firebase.google.com/docs/reference/js/firebase.app.App
this.app = firebase.initializeApp(fb_config);
this.auth = firebase.auth(this.app);
this.auth.onAuthStateChanged(
(user: firebase.User) => {
if (user) {
this.user$.next(user);
console.log('User signed in');
} else {
this.user$.next(null);
console.log('User signed out');
}
},
(error: firebase.auth.Error) => {
// handle error
}
)
}
public signInWithCustomToken(uid: string, secret_auth_code: string):
Observable<firebase.auth.UserCredential> {
const params = new HttpParams()
.set('uid', uid)
.set('secret', secret_auth_code)
return this.http.get('/get-custom-token', {params: params}).pipe(
concatMap((json: any) => from(this.auth.signInWithCustomToken(json['custom_token'])))
)
}
// ...
}
组件
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
constructor(private authService: FirebaseAuthService) {}
// ...
}
模板
<ng-container *ngIf="( authService.user$ | async ) as user">
<div>Hello {{user.displayName}}</div>
</ng-container>