Question

我仍在寻找Angular Navigation / Routing。成功验证Firebase用户后，页面无法加载时出现问题。我的开始页面是一个基本的登录页面，从中可以导航到仪表板或注册页面。据我所知，任何页面上都没有html和初始化错误。注册页面确实已加载，并且用户身份验证工作正常，但仪表板只是不想加载。我该如何解决？

这是我的login.page.html布局：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form class="form" [formGroup]="validations_form" (ngSubmit)="loginUser(validations_form.getRawValue())">

    <ion-item>
      <ion-label position="floating" color="primary">Email</ion-label>
      <ion-input type="text" formControlName="email" ></ion-input>
    </ion-item>
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.email">
        <div class="error-message"
          *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>

    <ion-item>
      <ion-label position="floating" color="primary">Password</ion-label>
      <ion-input type="password" formControlName="password" class="form-controll" required></ion-input>
    </ion-item>
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.password">
        <div class="error-message"
          *ngIf="validations_form.get('password').hasError(validation.type) && (validations_form.get('password').dirty || validations_form.get('password').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>

    <ion-button class="submit-btn" type="submit" [disabled]="!validations_form.valid">Log In</ion-button>

    <label class="error-message">{{errorMessage}}</label>
  </form>
  <p class="go-to-register">
    No account yet? <a (click)="goToRegisterPage()">Create an account.</a>
  </p>
</ion-content>

这是login.page.ts：

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {


  validations_form: FormGroup;
  errorMessage: string = '';

  user = {} as User;
  constructor(
    private navCtrl: NavController,
    private authService: AuthenticateService,
    private formBuilder: FormBuilder,
    private router: Router
  ) { }

  ngOnInit() {
    this.validations_form = this.formBuilder.group({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
      ])),
    });
  }

  validation_messages = {
    'email': [
      { type: 'required', message: 'Email is required.' }
    ],
    'password': [
      { type: 'required', message: 'Password is required.' }
    ]
  };

  loginUser(user) {
    this.authService.loginUser(user)
      .then(res => {
        this.errorMessage = "";
        this.router.navigate(['/dashboard']);
      }, err => {
        this.errorMessage = err.message;
      })
  }

  goToRegisterPage() {
    this.router.navigate(['/register']);
  }

}

这是dashboard.page.html布局：

<ion-header>
  <ion-toolbar primary>
    <ion-title>Dashboard</ion-title>
    <ion-buttons slot="end">
      <ion-button id="logout" (click)="logout()">
        <ion-icon slot="start" name="log-out-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        Welcome to Dashboard!
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        Your Registered EmailID : 111
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

和dashboard.page.ts：

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {

  userEmail: string;

  constructor(
    private navCtrl: NavController,
    private authService: AuthenticateService,
    public storage: Storage
  ) { }

  ngOnInit() {

    this.authService.userDetails().subscribe(res => {
      console.log('res', res);
      if (res !== null) {
        this.userEmail = res.email;
      } else {
        this.navCtrl.navigateBack('');
      }
    }, err => {
      console.log('err', err);
    })

  }


  logout() {
    this.authService.logoutUser()
      .then(res => {
        console.log(res);
        this.navCtrl.navigateBack('');
      })
      .catch(error => {
        console.log(error);
      })
  }
}

这是authentication.service.ts：

@Injectable({
  providedIn: 'root'
})
export class AuthenticateService {

  constructor(
    private afAuth: AngularFireAuth
  ) { }

  registerUser(user: User) {
    return new Promise<any>((resolve, reject) => {

      this.afAuth.createUserWithEmailAndPassword(user.email, user.password)
        .then(
          res => resolve(res),
          err => reject(err))
    })

  }

  loginUser(user: User) {
    return new Promise<any>((resolve, reject) => {
      this.afAuth.signInWithEmailAndPassword(user.email, user.password)
        .then(
          res => resolve(res),
          err => reject(err))
    })
  }

  logoutUser() {
    return new Promise((resolve, reject) => {
      if (this.afAuth.currentUser) {
        this.afAuth.signOut()
          .then(() => {
            console.log("LOG Out");
            resolve();
          }).catch((error) => {
            reject();
          });
      }
    })
  }

  userDetails() {
    return this.afAuth.user
  }
}

Answer 1

在路由系统中使用auth Guard会更可取。

Auth Guard Tuto

在仪表板页面中执行登录检查的方式很危险，很容易被绕过。

Answer 2

我知道了。问题不在导航路线上，而是导入Firebase Storage（我什至没有使用）的问题。

Firebase身份验证后，Angular Navigation不会路由到Ionic页面

2 个答案: