html - Firebase 身份验证后,Angular Navigation 未路由到 Ionic 页面
问题描述
我仍在研究 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
}
}
解决方案
推荐阅读
- ubuntu - 如何为 ext4 和 NTFS 分区上的相同文件获取相同的文件大小?
- python - 查找字符串中包含数字的列
- api - 这个 API 连接请求字符串缺少什么?
- java - 为 Kafka 自定义对象实现正确的序列化和反序列化
- wordpress - 通过 Polylang 插件更改语言时,有没有办法将所有查询参数保留在 URL 中?
- python - numpy.argsort 中的枢轴是如何选择的?
- git - 为什么我不能将本地 Git 存储库推送到远程?
- reactjs - React JS:TypeError:无法读取未定义的属性“地图”
- apache-flink - flink 1.9.0 或最新版本如何增加任务管理器的数量
- angular - 角度:将元素添加到列表并以图形方式选择它