要在Angular中使用AuthGuard和NGRX,可以按照以下步骤进行设置:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { AppState } from '../store/app.state';
import { isLoggedIn } from '../store/auth/auth.selectors';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private store: Store, private router: Router) {}
canActivate(): Observable {
return this.store.select(isLoggedIn).pipe(
tap(loggedIn => {
if (!loggedIn) {
this.router.navigate(['/login']);
}
})
);
}
}
import { AuthGuard } from './guards/auth.guard';
@NgModule({
...
providers: [
AuthGuard
]
})
export class AppModule { }
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
...
];
这样,当用户尝试访问受保护的路由时,AuthGuard将检查用户是否已经登录。如果用户未登录,它将重定向到登录页面。
请注意,上述代码示例是一个简化的版本,目的是演示如何在Angular中使用AuthGuard和NGRX。实际实现可能会因应用程序的要求而有所不同。