Angular 中的 Auth Guards 9/10/11

AuthGuard 用于保护路由免受角度未经授权的访问。

AuthGuard 是如何工作的？

Auth Guard 提供名为 canActivate 的生命周期事件。 canActivate 就像一个构造函数。它将在访问路由之前被调用。 canActivate 必须返回 true 才能访问该页面。如果它返回 false，我们将无法访问该页面。我们可以在 canActivate函数中编写我们的用户授权和认证逻辑。

AuthGuard is used to protect the routes from unauthorized access

所以在这里我们正在创建一个角度的 AuthGuard，它将保护我们的路由免受未经授权的访问。

示例：我们可以通过使用 CLI 运行简单命令来创建 AuthGuard。

ng g guard services/auth

上面的命令在 services 文件夹中创建了 AuthGuard，AuthGuard 的名字是 auth。

auth.guards.ts

import { Injectable } from "@angular/core";
import {
    ActivatedRouteSnapshot,
    CanActivate,
    Router,
    RouterStateSnapshot,
    UrlTree
} from "@angular/router";
import { AuthService } from "./auth.service";
  
@Injectable()
export class AuthGuard implements CanActivate {
    constructor(
        private authService: AuthService,
        private router: Router) { }
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean | Promise {
        var isAuthenticated = this.authService.getAuthStatus();
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
        }
        return isAuthenticated;
    }
}

在 canActivate函数中，我们检查用户是否通过了身份验证，“getAuthStatus”方法返回一个布尔值。所以基于这个值，我们从 canActivate 方法返回值。如果“getAuthStatus”返回值表示用户已通过身份验证，那么我们允许用户访问该页面，否则我们将用户导航到登录页面。

然后我们必须更新我们的路由文件，以便哪个路由受 AuthGuard 保护，以及哪个路由可供每个用户访问。

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } 
from '@angular/router';
import { AuthGuard } 
from './services/auth.guards';
import { LoginComponent } 
from './auth/login/login.component';
import { SignupComponent } 
from './auth/signup/signup.component';
import { PostCreateComponent } 
from './posts/post-create/post-create.component';
import { PostListComponent } 
from './posts/post-list/post-list.component';
  
const routes: Routes = [
  { path: '', 
  component: PostListComponent },
  { path: 'create', 
  component: PostCreateComponent, 
  canActivate: [AuthGuard]},
  { path: 'edit', 
  component: PostCreateComponent, 
  canActivate: [AuthGuard] },
  { path: 'login', 
  component: LoginComponent },
  { path: 'signup', 
  component: SignupComponent }
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
  
export class AppRoutingModule { }

在 routes 数组中，我们提供了 canActivate: [AuthGuard] 来“创建”和“编辑”路由，因此这两个路由只对经过身份验证的用户开放，其他路由对所有用户开放。

{ path: ‘create’, component: PostCreateComponent, canActivate: [AuthGuard]},
{ path: ‘edit’, component: PostCreateComponent, canActivate: [AuthGuard] },

确保在此路由文件中导入 AuthGuard，并将其添加到 @NgModule 提供程序中。

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard]
})

这就是我们如何在 AngularJS 中保护路由免受未经授权的访问。