在Angular中,可以使用路由守卫来检查尝试访问路由的用户。可以使用Firestore来存储用户的登录状态。
首先,创建一个名为AuthGuard的路由守卫服务:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { map, take, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth, private router: Router) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
return this.afAuth.authState.pipe(
take(1),
map(user => !!user),
tap(loggedIn => {
if (!loggedIn) {
this.router.navigate(['/login']);
}
})
);
}
}
在上面的代码中,AuthGuard实现了CanActivate接口,它的canActivate方法将在尝试访问受保护的路由时被调用。在canActivate方法中,我们订阅了afAuth.authState来获取当前用户的登录状态。如果用户已登录(即user不为null),则loggedIn为true,否则为false。如果用户未登录,我们使用Router导航到登录页面。
接下来,将AuthGuard应用到需要保护的路由上。假设我们有一个名为DashboardComponent的组件需要保护,可以在路由配置中使用canActivate属性来指定AuthGuard:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的代码中,我们将canActivate属性设置为[AuthGuard],这将确保只有已登录的用户才能访问DashboardComponent。
最后,确保用户在成功登录后将其登录状态保存到Firestore中。可以使用angularfire2库来与Firestore进行集成。
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-login',
template: `
`
})
export class LoginComponent {
constructor(private afAuth: AngularFireAuth, private router: Router, private firestore: AngularFirestore) {}
login() {
this.afAuth.auth.signInWithEmailAndPassword('email@example.com', 'password')
.then(userCredential => {
// Save user login status to Firestore
this.firestore.collection('users').doc(userCredential.user.uid).set({ loggedIn: true });
this.router.navigate(['/dashboard']);
})
.catch(error => {
console.error(error);
});
}
}
在上面的代码中,我们在成功登录后,将当前用户的登录状态保存到Firestore中的users集合中。可以根据需要更改存储逻辑。
这样,当用户尝试访问DashboardComponent路由时,AuthGuard将检查用户的登录状态并导航到登录页面(如果未登录)。