javascript - 页面重新加载后使用 Firestore 对 Angular 进行数据持久性

Question

一旦出于任何原因重新加载页面，我如何在我的 Firestore 服务器上保留或召回数据？基本上在其中一个组件中，我向一些数据发出请求，默认情况下这些数据在我的登录服务组件上被初始化，让我们说：

USER Component
export class UserComponent implements OnInit {
  resumeAccount: UserResumeAccount = {
    amountInAccount: 0,
    allDetails: null,
  };

   constructor(
    private userLogged: LoginService) {}

  ngOnInit(): void {
    this.resumeAccount.allDetails = this.userLogged.resumeAccount.allDetails;
    this.resumeAccount.amountInAccount = this.userLogged.resumeAccount.amountInAccount;
  }

}

然后在服务上，我部署了有关显示或不显示此用户记录信息的逻辑，一旦记录访问 firebase /firestoree 数据。一旦用户登录，数据就会正确显示，但如果出于任何原因页面重新加载所有数据尽管用户根据 getUserState() 方法处于活动状态，但仍会迷路：

LoginService component

@Injectable()
export class LoginService {
  //variables

  userdata: UserDataModel = {
    uid: '',
    restData: '',
  };
  userResumeAccount: UserResumeAccount = {
    amountInAccount: 0,
    allDetails: null,
  };

  totalAmount: number = 0;

  resumeAccount: UserResumeAccount = {
    amountInAccount: 0,
    allDetails: null,
  };

  //constructor
  constructor(
    private userLogin: AngularFireAuth,
    private docCreator: AngularFirestore,
    private router: Router
  ) {}

   ngOnInit():void {
    this.userLogin.setPersistence(auth.Auth.Persistence.SESSION);

   }

  //methods


   async logInUser(SignUpData: LoginData) {
    let { emailUser, passwordUser } = SignUpData;

    await this.userLogin.setPersistence(auth.Auth.Persistence.SESSION);

    let responseOk = await this.userLogin.signInWithEmailAndPassword(emailUser,passwordUser);

    this.userdata.uid = await responseOk.user.uid;
    this.userdata.restData = await responseOk.user;

    let pathUserName = await this.docCreator==>path to the document inside the firestore
      .collection('users')
      .doc(this.userdata.uid);

    await pathUserName========>getting the firestore data and asigning it to variables
      .get()
      .toPromise()
      .then(async (result) => {
        if (result.exists) {
          this.resumeAccount.allDetails = await result.get('userName');
          this.resumeAccount.amountInAccount = await this.totalAmount;
        } else return console.log('not Document Found');
      })
      .then(() => {})
      .catch((err) => {
        console.log('Error getting document:', err);
      });
  }

  getUserState() {
    return this.userLogin.authState.pipe(map((userLoged) =>{return (console.log(userLoged),
         userLoged)}));
  }===>ON RELOAD THIS METHOD STILL SHOWS USER ACTIVE 
}

因此，基本上在触发登录过程的方法的前一部分中，我访问了存储在 firestore 中的数据；同样在 ngOnInit 方法中，我为该部分建立了一个持久性方法，假装在页面重新加载后保持数据到达，但这是错误的！，以及它在 loginUser 方法开始时的初始化也是如此。我该如何改善这个问题。真的提前谢谢

标签： javascriptangularfirebasegoogle-cloud-firestore