javascript - Angular/Firebase : How to put user response in front-end model

Question

我对两者都是新手。我的思考过程如下。当我使用 Angular 登录 Firebase 后端时，如果成功，我会向控制台发送响应。在此响应中，我可以看到 firebase 用户拥有的所有 key 。我想要做的是将它们链接到前端的用户模型中，以便在显示用户个人资料页面或其他内容时可以轻松访问它。 (我也不知道这是否是正确的思维过程。如果您知道更好的解决方案，请以正确的方式插入我)

auth.service.ts

  constructor(
    private angularFireAuth: AngularFireAuth,
  ) {
    this.userData = angularFireAuth.authState;
  }

  signIn(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }

login.component.ts

signIn(email: string, password: string) {
    this.spinnerButtonOptions.active = true;
    email = this.loginForm.value.email;
    password = this.loginForm.value.password;
    this.auth.signIn(email, password).then(
      res => {
        console.log('signed in ', res);
        this.router.navigate(['/dashboard']);
      }
    ).catch(
      error => {
        console.log('something went wrong ', error);
        this.formError = true;
        this.spinnerButtonOptions.active = false;
      }
    );
  }

我怎样才能做到这一点？我到处搜索，找不到任何解决方案。这实际上是正确的方法吗？如果有更好的方法请告诉我!

Answer 1

您可以使用身份验证服务来存储从 Firebase 后端返回的数据。或者，您可以将其存储在共享服务中，所有组件和模块都可以使用它。

在您的身份验证服务中:

@Injectable()
export class AuthService{
public usermodel:any;
  constructor(private angularFireAuth: AngularFireAuth) {
    this.userData = angularFireAuth.authState;
  }

  signIn(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }
  setLoggedInUserData(userDetails: any) {
    this.usermodel = userDetails;
  }
  getLoggedInUserData() {
    return this.usermodel;
  }
}

在您登录 component.ts 时:

signIn(email: string, password: string) {
    this.spinnerButtonOptions.active = true;
    email = this.loginForm.value.email;
    password = this.loginForm.value.password;
    this.auth.signIn(email, password).then(
      res => {
        this.authService.setLoggedInUserData(res);
        this.router.navigate(['/dashboard']);
      }
    ).catch(
      error => {
        console.log('something went wrong ', error);
        this.formError = true;
        this.spinnerButtonOptions.active = false;
      }
    );
  }

在需要使用使用详细信息的其他组件中，注入(inject) auth.service.ts 并使用 getLoggedInUserData() 方法获取登录用户的详细信息。

还有其他几种方法可以做到这一点。一种选择是使用 ngrx 存储实现。其他方法是在 Angular 应用程序的根级别使用全局数据服务来存储用户详细信息。