我正在为我的Ionic 4项目添加AuthGuard。警卫人员检查用户是否已登录；如果为true，则继续进入主页；如果为false，则将用户重定向到登录页面。问题是当由于保护措施而使用户重定向到登录页面时，“角度材质”标签无法正常工作。在没有保护人员的情况下访问登录页面时，一切正常。
AuthGuard服务：
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from './user.service';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';
@Injectable({
providedIn: 'root'
})
export class AuthService implements CanActivate {
constructor(
private router: Router,
public afAuth: AngularFireAuth,
private user: UserService) {
}
canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
return new Promise((resolve, reject) => {
this.afAuth.auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
resolve(true);
} else {
// No user is signed in.
resolve(false);
this.router.navigate(['login']);
}
});
});
}
}
login.page.html
<ion-content>
<div class="blue-background">
<img src="assets/logo.png" width="33%" height="18.6%" style="display: block; margin-left: auto; margin-right: auto;"/>
</div>
<div class="form_wrapper">
<div class="form_container">
<div class="row clearfix">
<div class="">
<mat-form-field appearance="outline" style="height: 40px; margin-bottom: 1.5em;">
<mat-label>Email</mat-label>
<input matInput style="min-height: 40px;" type="email" [(ngModel)]="username">
</mat-form-field>
<mat-form-field appearance="outline" style="height: 40px; margin-bottom: 1.5em;">
<mat-label>Password</mat-label>
<input matInput style="min-height: 40px;" type="password" [(ngModel)]="password">
</mat-form-field>
<ion-button style="margin-top: 10px; float: right; overflow: auto" fill="clear" size="small" color="dark" (click)="goToForgotPassword()">Forgot password?</ion-button>
<ion-button style="clear: both; overflow: auto" fill="solid" expand="block" color="dark" (click)="login()">Login</ion-button>
</div>
</div>
</div>
</div>
</ion-content>
Image of how the fields should work.
Image of how the fields work after the AuthGuard redirect. Notice the labels don't float.
