要解决“Angular/Firebase应用程序始终显示上一页的数据”的问题,你可以使用Angular的路由守卫来检查用户是否具有权限访问当前页面,并确保他们已经登录。以下是一个示例解决方法:
AuthGuard
的路由守卫:import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
这个守卫会检查AuthService
中的isLoggedIn()
方法,如果用户已经登录,则返回true
,允许访问当前页面。否则,它将导航到登录页面,并返回false
,阻止访问。
AuthGuard
来保护需要登录的页面:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ProfileComponent } from './profile.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在这个示例中,ProfileComponent
受到AuthGuard
的保护,只有当用户已经登录时才能访问。
AuthService
中:import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-login',
template: `
`
})
export class LoginComponent {
constructor(private authService: AuthService) {}
login() {
// 使用Firebase进行身份验证,成功后保存用户状态
this.authService.login();
}
}
在AuthService
中的login()
方法中,你可以使用Firebase进行身份验证,并在成功登录后将用户状态保存到AuthService
中。
AuthService
中,添加isLoggedIn()
方法来检查用户登录状态:import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
private isLoggedInFlag: boolean = false;
isLoggedIn(): boolean {
return this.isLoggedInFlag;
}
login() {
// 使用Firebase进行身份验证,成功后设置isLoggedInFlag为true
this.isLoggedInFlag = true;
}
}
在这个示例中,isLoggedInFlag
标记用户是否已登录。
通过使用路由守卫和AuthService
,你可以确保用户必须先登录才能访问受保护的页面,并防止应用程序始终显示上一页的数据。