Data Persistence on Angular with Firestore after page reload

问题

How could i persist or recall on my firestore server the data once i reload page for any reason? Basically in one of the components i make request to some data which by default gets initialized on my login Service component,lets say:

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;
  }

}

then on the service i deploy the logic about showing or not this user logged information once is logged accessing to the firebase /firestoree data .Once the user signs in the data shows up cprrectly , but if for any reason the page is reload all the data get lost despite of user being active according with method 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 
}

Thus basically in this former section inside the method which triggers the sign in process i access the data stored in firestore ; also at the ngOnInit methods i establish a persistence method for the section pretending to keep data reached once the page reloads, but is wrong!,as well as its initialization at the beggining of the loginUser method too. How could i improve this problem.Really thanks in advance

来源：https://stackoverflow.com/questions/62064163/data-persistence-on-angular-with-firestore-after-page-reload