AngularFire / Firebase - 检查身份验证状态
AngularFire / Firebase - checking the authentication state
注意:我对这一切都是陌生的,请原谅我可能很明显。非常感谢任何帮助:)
我有什么
- 用于登录和注销的身份验证服务
- 基于用户 ID 获取项目的相册服务
- albumList > UserId > albumKey
- 在我的相册列表服务中查询路径'albumList > userId'
- 我登录后,这完美地工作,并且只返回基于上述匹配查询的结果
问题
- 如果我将 'localhost:4200/albums' 的 URL 复制并粘贴到另一个选项卡中,控制台会显示
Uncaught (in promise): TypeError: Cannot read property 'uid' of null
- 因此,没有加载任何内容,URL 粘贴也没有得到维护
问题
- 我是否需要在我的所有组件中添加一个 user observable?
- 如何确保在加载我的数据之前检查用户状态?
- 是否可以仅使用我的 Auth.Service 作为所有其他组件的参考点?
我的授权服务
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthService {
user: Observable<firebase.User>;
constructor(
private firebaseAuth: AngularFireAuth,
private router: Router) {
this.user = firebaseAuth.authState;
}
login(email: string, password: string) {
this.firebaseAuth
.auth
.signInWithEmailAndPassword(email, password)
.then(value => {
console.log('Nice, it worked!');
console.log(this.firebaseAuth.auth.currentUser.uid);
this.router.navigate(['/albums'])
})
.catch(err => {
console.log('Something went wrong:', err.message);
});
}
logout() {
this.firebaseAuth
.auth
.signOut();
}
}
我的专辑列表服务
注意: 如果我删除末尾带有用户 ID 的 albumList 查询(已注释掉的查询),我可以将 URL 复制并粘贴到一个新的选项卡并维护 URL (url.com/albums)。但是,任何数据都不会首先被用户密钥过滤。
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProjectsListService {
albumList: FirebaseListObservable<any[]>;
user: Observable<firebase.User>;
constructor(
private database: AngularFireDatabase,
private firebaseAuth: AngularFireAuth) {
//this.albumList = database.list('/albumList');
this.albumList = database.list('/albumList/' + this.firebaseAuth.auth.currentUser.uid);
//console.log(this.firebaseAuth.auth.currentUser.uid);
}
getAlbumList() {
return this.albumList;
}
}
Questions
- Do I need to add a user observable in all my components?
是的,您一直在处理异步数据,您需要订阅来自 firebase 的更改
- How do I ensure that the user state is checked before loading my data?
看来您对angular也比较陌生,一下子学会所有东西可能会比较困难。你应该检查 Router tutorial, more exactly the module 5 Route Guards。
- Is it possible to just use my Auth.Service as a reference point for all other components?
是的,这完全取决于您,这是很常见的事情。
至于类型错误,您正在尝试访问一个在您初始化应用程序时不存在的值,因为您是异步获取的,所以您需要订阅 authState
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProjectsListService {
albumList: FirebaseListObservable<any[]>;
user: Observable<firebase.User>;
constructor(
private database: AngularFireDatabase,
private firebaseAuth: AngularFireAuth
) {
firebaseAuth.authState.subscribe(user => {
console.log(user);
if (user) {
this.albumList = database.list('/albumList/' + user.uid);
}
})
}
getAlbumList() {
return this.albumList;
}
}
编辑
之前的代码不起作用,因为当您第一次 运行 您的应用程序时,albumList 是一个空变量,这就是为什么在您导航之后一切正常,因为在那之后它已经初始化,您可以订阅它。
因此,因为您依赖于身份验证状态,所以您应该改为在您的组件上订阅您的 albumList
。为什么?因为如果您的用户出于某种原因注销,您也会隐藏信息。
所以不要在你的组件上使用 ProjectsListService
你会做这样的事情:
import { Component } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'
@Component({
selector: 'your-component',
template: `<ul><li *ngFor="let album of albumList | async">{{ todo.text }}</li></ul>`
})
export class YOURComponent {
albumList: FirebaseListObservable<any[]>;
constructor(
private fAuth: AngularFireAuth,
private database: AngularFireDatabase
) {
fAuth.authState.subscribe(user => {
if (user) {
this.albumList = database.list('/albumList/' + user.uid);
return;
}
this.albumList = null;
})
}
}
注意:我对这一切都是陌生的,请原谅我可能很明显。非常感谢任何帮助:)
我有什么
- 用于登录和注销的身份验证服务
- 基于用户 ID 获取项目的相册服务
- albumList > UserId > albumKey
- 在我的相册列表服务中查询路径'albumList > userId'
- 我登录后,这完美地工作,并且只返回基于上述匹配查询的结果
问题
- 如果我将 'localhost:4200/albums' 的 URL 复制并粘贴到另一个选项卡中,控制台会显示
Uncaught (in promise): TypeError: Cannot read property 'uid' of null
- 因此,没有加载任何内容,URL 粘贴也没有得到维护
问题
- 我是否需要在我的所有组件中添加一个 user observable?
- 如何确保在加载我的数据之前检查用户状态?
- 是否可以仅使用我的 Auth.Service 作为所有其他组件的参考点?
我的授权服务
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthService {
user: Observable<firebase.User>;
constructor(
private firebaseAuth: AngularFireAuth,
private router: Router) {
this.user = firebaseAuth.authState;
}
login(email: string, password: string) {
this.firebaseAuth
.auth
.signInWithEmailAndPassword(email, password)
.then(value => {
console.log('Nice, it worked!');
console.log(this.firebaseAuth.auth.currentUser.uid);
this.router.navigate(['/albums'])
})
.catch(err => {
console.log('Something went wrong:', err.message);
});
}
logout() {
this.firebaseAuth
.auth
.signOut();
}
}
我的专辑列表服务
注意: 如果我删除末尾带有用户 ID 的 albumList 查询(已注释掉的查询),我可以将 URL 复制并粘贴到一个新的选项卡并维护 URL (url.com/albums)。但是,任何数据都不会首先被用户密钥过滤。
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProjectsListService {
albumList: FirebaseListObservable<any[]>;
user: Observable<firebase.User>;
constructor(
private database: AngularFireDatabase,
private firebaseAuth: AngularFireAuth) {
//this.albumList = database.list('/albumList');
this.albumList = database.list('/albumList/' + this.firebaseAuth.auth.currentUser.uid);
//console.log(this.firebaseAuth.auth.currentUser.uid);
}
getAlbumList() {
return this.albumList;
}
}
Questions
- Do I need to add a user observable in all my components?
是的,您一直在处理异步数据,您需要订阅来自 firebase 的更改
- How do I ensure that the user state is checked before loading my data?
看来您对angular也比较陌生,一下子学会所有东西可能会比较困难。你应该检查 Router tutorial, more exactly the module 5 Route Guards。
- Is it possible to just use my Auth.Service as a reference point for all other components?
是的,这完全取决于您,这是很常见的事情。
至于类型错误,您正在尝试访问一个在您初始化应用程序时不存在的值,因为您是异步获取的,所以您需要订阅 authState
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProjectsListService {
albumList: FirebaseListObservable<any[]>;
user: Observable<firebase.User>;
constructor(
private database: AngularFireDatabase,
private firebaseAuth: AngularFireAuth
) {
firebaseAuth.authState.subscribe(user => {
console.log(user);
if (user) {
this.albumList = database.list('/albumList/' + user.uid);
}
})
}
getAlbumList() {
return this.albumList;
}
}
编辑
之前的代码不起作用,因为当您第一次 运行 您的应用程序时,albumList 是一个空变量,这就是为什么在您导航之后一切正常,因为在那之后它已经初始化,您可以订阅它。
因此,因为您依赖于身份验证状态,所以您应该改为在您的组件上订阅您的 albumList
。为什么?因为如果您的用户出于某种原因注销,您也会隐藏信息。
所以不要在你的组件上使用 ProjectsListService
你会做这样的事情:
import { Component } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'
@Component({
selector: 'your-component',
template: `<ul><li *ngFor="let album of albumList | async">{{ todo.text }}</li></ul>`
})
export class YOURComponent {
albumList: FirebaseListObservable<any[]>;
constructor(
private fAuth: AngularFireAuth,
private database: AngularFireDatabase
) {
fAuth.authState.subscribe(user => {
if (user) {
this.albumList = database.list('/albumList/' + user.uid);
return;
}
this.albumList = null;
})
}
}