- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在 firebase 中设置自定义用户数据库,其中将使用用户身份验证 uid 存储文档 ID。
我目前面临的问题是存储当前用户文档,以便在用户登录时显示在我的仪表板上。
目前,在我的 authService.ts 上,我存储来自 firebase.user 的数据在我的仪表板上将仅显示默认数组中的信息。这就是我的 auth.service.ts
export class AuthService {
userData: any;
userCollection: AngularFirestoreCollection<User>;
constructor(
public afs: AngularFirestore, // Inject Firestore service
public afAuth: AngularFireAuth, // Inject Firebase auth service
public router: Router,
public ngZone: NgZone, // NgZone service to remove outside scope warning
) {
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
this.UserID = this.userData.uid;
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
SignUp(username, email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
// set account doc
let created_data = JSON.parse(JSON.stringify(result.user));
const account = {
uid: result.user.uid,
created_time: created_data.createdAt,
email: result.user.email,
display_name: username,
photoURL: result.user.photoURL,
}
this.SetUserData(account);
}).catch((error) => {
window.alert(error.message)
})
}
/* Setting up user data when sign in with username/password,
sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore + AngularFirestoreDocument service */
SetUserData(user) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const userData: User = {
bio: null,
country: {
country: null,
country_code:null,
symbol:null
},
gender: "unspecified",
languages: null,
profile_pic: user.photoURL,
username: user.display_name,
}
return userRef.set(userData, {
merge: true
})
}
}
以及我的dashboard.component.ts
export class DashboardComponent implements OnInit {
isLoggedIn$: Observable<boolean>;
isLoggedOut$:Observable<boolean>;
constructor(
public afAuth: AngularFireAuth,
public authService: AuthService
) { }
ngOnInit() {
this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
}
}
这样,我只能从 firebase.user 中存储的内容获取详细信息,而不能从我的自定义数据库中获取详细信息。如何根据经过身份验证的用户的 UID 进入特定文档,以便显示个人简介、性别和语言等信息?
这就是我在 dashboard.html
上解析信息的方式
<!-- Main content -->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="inner-adjust">
<div class="pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">User Profile</h1>
</div>
<!-- Show user data when logged in -->
<div class="row" *ngIf="authService.userData as user">
<div class="col-md-12">
<div class="media">
<img class="align-self-start mr-5 img-thumbnail rounded-circle" src="{{(user.photoURL) ? user.photoURL : '/assets/placeholder-user.jpg'}}"
alt="{{user.displayName}}">
<div class="media-body">
<h1>Hello: <strong>{{(user.username)}}</strong></h1>
<p>Email: <strong>{{user.email}}</strong></p>
<p>Gender: <strong>{{user.gender}}</strong></p>
<p>Languages: <strong>{{user.languages}}</strong></p>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
</main>
最佳答案
我认为没有必要使用 localStorage
,只要应用程序正在运行,Firebase 就会发出 authstate,并且如果用户没有登录,authState
返回null
。
顺便说一句 - 您还在一个地方使用 JSON.parse(JSON.stringify(...))
,这没有什么意义;)
无论如何,我有类似的设置,这就是我的做法:
在身份验证服务中:
user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
return this.afs.doc<any>(`users/${user.uid}`).valueChanges();
} else {
return of(null);
}
})
);
然后我就订阅我需要的user$
。通过手动订阅或使用异步管道来完成此操作。如果您想手动订阅,您需要记住在组件销毁时取消订阅。
这里使用异步管道的示例:
user$ = this.authService.user$;
constructor(private authService: AuthService) { }
模板:
<div *ngIf="(user$ | async) as user">
<h1>Hello: <strong>{{ user.username }}</strong></h1>
</div>
另外,不要使用任何
。请为您的数据创建模型(界面是我的偏好)。毕竟我们正在使用 TypeScript ;)
关于AngularFire根据用户身份验证检索文档ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58060028/
如果我使用下面的代码,数据将为零 dispatch_async(dispatch_get_global_queue(0,0), ^{ UIImage *img = [[UIImage allo
fread来自 data.table包一般可以在读取文件时自动确定列分隔符( sep )。 例如,这里fread自动检测 |作为列分隔符: library(data.table) fread(past
因此,如果我有一个如下所示的数据框: A B C rowname1 4.5 4 3.2 rowname2 3 23
我有一个汽车模型的搜索数据库:“日产Gtr”,“Huynday Elantra”,“Honda Accord”等。 现在我还有一个用户列表和他们喜欢的汽车类型 user1喜欢:carId:1234,c
我正在使用 Javamail 来获取一些电子邮件数据。我将用户输入作为电子邮件 ID、imap 地址和密码并连接到 imap。然后我监视收件箱的电子邮件并查明此人是否在“收件人”或“抄送”中。 Ema
我有一些数据,我想根据差距统计来评估最佳簇数。 我阅读了 gap statistic 上的页面在 r 中给出了以下示例: gs.pam.RU Number of clusters (method '
我有一个用户名和密码组合,我将使用它通过 java 代码访问安全服务器。 我的想法是: 在外部存储加密凭据 执行时提示用户输入解密密码 在使用前将解密的凭据直接存储在字符数组中 使用凭据连接到数据库
这是 Firebase 数据:[Firebase 数据][1] 我必须从员工那里检索所有字段并将其存储在一个数组中。 现在数据更改 toast 消息即将到来,但已经很晚了。 Firebase.setA
我是 iOS 的新手,正在开发一个基本的应用程序,它目前正在使用 SSKeychain 和 AFNetworking 与 API 进行交互。当您使用我检索的应用程序登录并在我的 CredentialS
编辑:这个问题已经在 apphacker 和 ConcernedOfTunbridgeWells 的帮助下得到解决。我已更新代码以反射(reflect)我将使用的解决方案。 我目前正在编写一个群体智能
我是 C 的新手,我想编写一个程序来检查用户输入的单词是否合法。我已经在 stackoverflow 上搜索了建议,但很多都是针对特定情况的。请在我被激怒之前,我知道这个语法不正确,但正在寻找一些关于
我相信你们中的一些人编写过 C# 类,这些类必须从数据库设置密码/从数据库获取密码。 我假设敏感细节不会以明文形式显示。处理此类数据的推荐程序是什么?检索到的文本是否加密?您是否将 pws 存储在加密
我在 linux 上使用 2.7 之前的 python 版本,想知道如何检索 RUID? 2.7 及更高版本从 os 包中获得了 getresuid,但我似乎找不到 2.6 的等效项 最佳答案 您可以
我已经在 Android 中实现了一个存储对象的标准 LRUCache。每个键都是与存储的对象关联的唯一 ObjectId。我的问题是从缓存中检索对象的唯一方法是通过 ObjectId(无迭代器)。实
这已经被问过很多次了。解决方案(对我有用)是从 packages.config 文件(这就足够了)和 packages 文件夹中删除 *** 包。 这对我来说是一个糟糕的解决方案,因为每次我想安装一些
我有以下文字: #{king} for a ##{day}, ##{fool} for a #{lifetime} 以及以下(损坏的)正则表达式: [^#]#{[a-z]+} 我想匹配所有#{word
我正在寻找一种快速(如高性能,而不是快速修复)解决方案来持久化和检索数千万个小型(大约 1k)二进制对象。每个对象都应该有一个用于检索的唯一 ID(最好是 GUID 或 SHA)。额外的要求是它应该可
有没有办法获取 RegInit 的重置值?通过探测产生的类型的成员?我可以看到 RegInit 将返回类型(例如 UInt )。例如,我将有一个寄存器,我想通过 regmap 对其进行控制。 val
Iv 目前接手了一个项目,其中开发人员在某些表的 json 数组列中存储了 has many 关系。 产品表 ---------------------------- id | product | c
Git 会在任何地方记录推送到远程的历史吗? 我注意到我们能够在 Microsoft VSTS 中查看 Git 存储库的推送历史记录以及每次推送的相关提交。它甚至显示旧的、过时的提交,由于后来的强制推
我是一名优秀的程序员,十分优秀!