Angular 离子4-角型/火焰存储

我面临一个有关身份验证和用户配置文件的问题。 我使用的是ionic v4/angular和firestore。 目前，我可以通过电子邮件和密码登录，但当我想进入个人资料以获取此用户数据时，我面对的是一个空白页

这里是我的user.service.ts

import { Injectable } from '@angular/core'
import { AngularFireAuth } from '@angular/fire/auth'
import { first } from 'rxjs/operators'
import { auth } from 'firebase/app'

interface user {
    username: string,
    uid: string
}

@Injectable()
export class UserService {
    private user: user

    constructor(private afAuth: AngularFireAuth) {

    }

    setUser(user: user) {
        this.user = user
    }

    getUsername(): string {
        return this.user.username
    }

    reAuth(username: string, password: string) {
        return this.afAuth.auth.currentUser.reauthenticateWithCredential(auth.EmailAuthProvider.credential(username, password))
    }

    updatePassword(newpassword: string) {
        return this.afAuth.auth.currentUser.updatePassword(newpassword)
    }

    updateEmail(newemail: string) {
        return this.afAuth.auth.currentUser.updateEmail(newemail)
    }

    async isAuthenticated() {
        if(this.user) return true

        const user = await this.afAuth.authState.pipe(first()).toPromise()

        if(user) {
            this.setUser({
                username: user.email.split('@')[0],
                uid: user.uid
            })

            return true
        }
        return false
    }

    getUID(): string {
        return this.user.uid
    }
}

这是我的login.page.ts

export class LoginPage implements OnInit {

    username: string = ""
    password: string = ""

    constructor(public afAuth: AngularFireAuth, public user: UserService, public router: Router) { }

    ngOnInit() {
    }

    async login() {
        const { username, password } = this
        try {
            // kind of a hack. 
            const res = await this.afAuth.auth.signInWithEmailAndPassword(username, password)

            if(res.user) {
                this.user.setUser({
                    username,
                    uid: res.user.uid,
                })
                console.log(res.user.uid)
                this.router.navigate(['/home-results'])
            }

        } catch(err) {
      alert("Bad Credentials")
            console.dir(err)
            if(err.code === "auth/user-not-found") {
                console.log("User not found")
            }
        }
    }
}

profil.page.ts

@Component({
  selector: 'app-profil',
  template: `
  <!-- User logged in -->
  <ng-template #authenticated>
  <div *ngIf="auth.user | async as user">
    <h3>Howdy, {{ user.username }}</h3>
    <p>UID: {{ user.uid }}</p>
    <!-- <p>Favorite Color: {{ user.countryBirth }} </p> -->
    <button (click)="auth.signOut()">Logout</button>
  </div>
  </ng-template>`,


  styleUrls: ['./profil.page.scss'],
})
export class ProfilPage {

  constructor(public auth: AuthService ,public user:UserService){}

}

@组件({
选择器：“应用程序配置文件”，
模板：`
你好，{{user.username}
UID:{user.UID}

注销
`,
样式URL:['./profil.page.scss']，
})
出口级利润表{
构造函数（公共auth:AuthService，公共用户：UserService）{}
}

不要使用路由器尝试使用导航控制器

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {
   if (this.user) {
     this.navCtrl.navigateRoot('/home-results');
   }
}

---

我不确定Firebase身份验证将在多大程度上维护用户配置文件（尽管像Facebook这样的第三方身份验证将向auth对象提供用户详细信息，但您不能更新这些信息）。您可能希望通过用户集合中的用户文档，利用Firebase UID作为文档属性之一，在FireStore中维护用户配置文件。这样，您就可以存储特定于应用程序需求的自定义用户配置文件数据

AngularFire可以帮助您设置集合，并向您展示如何获取/设置集合中的文档。但特别是关于如何获取用户身份验证数据的问题，您可以订阅Firebase authstate，它将为您提供用户的所有身份验证信息，包括电子邮件和UID

user.service.ts

user: any = null;

constructor(private afAuth: AngularFireAuth){  }

init(){
   this.afAuth.authState.subscribe(auth => {
     this.user = auth;
   });
}

constructor(public userService: UserService){
  this.userService.init();
}

app.component.ts

user: any = null;

constructor(private afAuth: AngularFireAuth){  }

init(){
   this.afAuth.authState.subscribe(auth => {
     this.user = auth;
   });
}

constructor(public userService: UserService){
  this.userService.init();
}

我有一个Ionic Firebase Auth启动器，您可能也会发现它对参考很有用

---

希望这有帮助。

我将当前行替换为以下内容：

this.usersCollection = afs.collection<User>('users'+ firebase.auth().currentUser.uid);

this.userscolection=afs.collection（'users'+firebase.auth（）.currentUser.uid）；

而不是

this.usersCollection = afs.collection<User>('users/');

this.userscolection=afs.collection（'users/'）；

---

但是html还是空白的

最后，我找到并解决了我的问题

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router,
    public auth: AuthService
  ) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          console.log(user.email)
          console.log(user.uid)
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    );
  }

构造函数(
私人afAuth:AngularFireAuth，
私人afs:AngularFirestore，
专用路由器：路由器，
公共身份验证：身份验证服务
) {
this.user$=this.afAuth.authState.pipe(
开关映射（用户=>{
如果（用户）{
console.log（user.email）
console.log（user.uid）
返回这个.afs.doc（`users/${user.uid}`）。valueChanges（）；
}否则{
返回（空）；
}
})
);
}

Hi Rich，非常感谢您的解释，我更改了您的user.service，但它仍然不起作用。我会检查你的git回购协议和你提供给我的文件。我的坏安东尼。我忘记包含从app.component到用户服务的必要init（）调用。我更新了示例。希望这会让你一切就绪。嗨，里奇，我正在关注你的git回购工作。我几乎解决了我的问题，除了最后一个关于“订阅”的问题，当我想访问用户档案时。它注意到：无法读取“subscribe”属性抱歉，Anthony，我无法重新创建该警告/错误。感觉好像在可观察对象可用之前发生了什么，使其无法订阅。请随时通过电子邮件联系。也许共享一两个代码片段，我们就可以解决这个问题。你可以找到我的个人网站，然后在我的个人简历中发电子邮件。嗨，巴勃罗，谢谢你的回答，但它仍然不起作用。我仍然面对一页空白