Angular 中的 AuthGuard 是一个路由守卫,它用于保护某些路由,只有当用户经过身份验证并具有访问权限时,才允许他们访问。AuthGuard 通常与路由配置一起使用,以确保用户无法直接访问需要身份验证的页面。
AuthGuard 是一个 Angular 服务,可以使用以下命令来创建它:
ng g guard auth
上面的命令将生成一个名为“auth”的 AuthGuard,并将其添加到 src/app/auth.guard.ts
文件中。auth.guard.ts
文件中的代码如下所示:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
在上面的代码中,AuthGuard 是通过实现 CanActivate 接口来定义的。CanActivate 接口包含一个名为 canActivate()
的方法,该方法决定了当用户尝试访问受保护的路由时应该执行哪些操作。
在 AuthGuard 中,我们注入了一个名为 AuthService
的服务和 Router
对象。AuthService
用于检查用户是否已经登录,而 Router
用于导航到登录页面或者用户试图访问的页面。在 canActivate()
方法中,我们首先调用 this.authService.isLoggedIn()
方法来检查用户是否已经登录。如果用户已经登录,我们返回 true,表示用户可以访问该路由。否则,我们调用 this.router.navigate(['/login'])
方法,将用户重定向到登录页面,然后返回 false,表示用户无法访问该路由。
要使用 AuthGuard 来保护一个路由,我们需要在路由配置中将 AuthGuard 添加到 canActivate
属性中。例如:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的代码中,我们将 AuthGuard 添加到了 /dashboard
路由的 canActivate
属性中,这意味着只有当用户已经登录时才能访问 /dashboard
路由。