Question

因此，我正在构建一个Ionic-Angular应用程序，该应用程序让医院患者向护士提交请求，护士可以看到他们分配的请求（基于分配给提交请求的患者的房间）。护士可以看到所有请求，而病人只能看到他/她的请求。我在auth.service.ts中有一个函数，一旦用户手动登录，或者如果它是自动登录（存储并找到令牌），则称为（setUserType（）），并在完成后获取用户类型和名称身份验证。

问题是，在NgOnInit的my-requests.page.ts中，我在请求服务中调用了一个函数，该函数运行查询以获取所有请求（如果是护士）或仅获取用户的请求（如果（请耐心等待）基于登录/自动登录发生后我分配的用户类型。一旦呈现了my-requests.page.html，该字段便未分配，而且我似乎找不到找到仅在获得用户类型信息后才能呈现它的方法。

setUserType（）函数：

    let userId: string;
    this.userIdObservable.subscribe(x => {
      userId = x;
    });
    const userQuery = this.firestore.doc<Users>(`added-users/${userId}`);
    userQuery.valueChanges().subscribe(x => {
      this._userType = x.type;
      this._userName = x.name;
    });

我的请求ngOnInit函数：

      ngOnInit() {
    this.segment.value = 'progress';
    this.requestSubscription = this.requestsService
      .loadRequests()
      .subscribe(requests => {
        this.requestsList = requests;
      });
  }

现在所有的身份验证功能-

验证页验证功能：

    authenticate(email: string, password: string) {
    this.isLoading = true;
    this.loadingCtrl
      .create({
        keyboardClose: true,
        message: 'Logging in...'
      })
      .then(loadingEl => {
        loadingEl.present();
        let authObs: Observable<AuthResponseData>;
        if (this.isLogin) {
          authObs = this.authService.login(email, password);
        } else {
          authObs = this.authService.signup(email, password);
        }
        authObs.subscribe(resData => {
          console.log(resData);
          this.isLoading = false;
          loadingEl.dismiss();
          this.authService.setUserType();
          this.router.navigateByUrl('/requests/tabs/add-requests');
        }, errRes => {
          loadingEl.dismiss();
          const code = errRes.error.error.message;
          let message = 'Could not sign you up, please try again.';
          if (code === 'EMAIL_EXISTS') {
            message = 'This Id exists already!';
          } else if (code === 'EMAIL_NOT_FOUND') {
            message = 'No such user.';
          } else if (code === 'INVALID_PASSWORD') {
            message = 'Could not log you in, please try again.';
          }
          this.showAlert(message);
        });
      });
  }

身份验证服务登录功能：


      login(email: string, password: string) {
    return this.http
      .post<AuthResponseData>(
        `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=${
          environment.firebaseAPIKey
        }`,
        { email: email, password: password, returnSecureToken: true }
      )
      .pipe(tap(this.setUserData.bind(this)));
  }

验证服务自动登录功能：

    autoLogin() {
    return from(Plugins.Storage.get({ key: 'authData' })).pipe(
      map(storedData => {
        if (!storedData || !storedData.value) {
          return null;
        }
        const parsedData = JSON.parse(storedData.value) as {
          token: string;
          tokenExpirationDate: string;
          userId: string;
          email: string;
        };
        const expirationTime = new Date(parsedData.tokenExpirationDate);
        if (expirationTime <= new Date()) {
          return null;
        }
        const user = new User(
          parsedData.userId,
          parsedData.email,
          parsedData.token,
          expirationTime
        );
        return user;
      }),
      tap(user => {
        if (user) {
          this._user.next(user);
          this.setUserType();
        }
      }),
      map(user => {
        return !!user;
      })
    );
  }

Answer 1

这是您可以不必将其包含在任何模块中的方法，cli将为您做到这一点。

import {Component, Injectable, OnInit} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {FormGroup} from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  private user = new BehaviorSubject({
    isLoggedIn: false,
    userType: null
  });

  constructor() {
  }

  setUser(user) {
    this.user.next(user);
  }

  getUser() {
    return this.user;
  }
}

// my request 

@Component({
  selector: 'request-component',
  templateUrl: './request-component.html'
})
export class RequestComponent implements OnInit {
  constructor(private userStateService: UserStateService) {}

  ngOnInit(): void {
    this.userStateService
      .getUser()
      .subscribe(
      ((val: {isLoggedIn: boolean, userType: any}) => {
        // calll you service
      }));
  }
}

// in your auto login or login you call setter

this.userStateService.setUser({isLoggedIn: true, userType: 'data from login'});

在从Firestore加载用户类型之前呈现视图

1 个答案: