在Angular中的授权守卫 9/10/11

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

AuthGuard如何工作？

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

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

因此，在这里我们要在angular中创建一个AuthGuard，它将保护我们的路由免受未经授权的访问。

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

ng g guard services/auth

上述命令在services文件夹内创建了AuthGuard，AuthGuard的名称是auth。

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<boolean> {
        var isAuthenticated = this.authService.getAuthStatus();
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
        }
        return isAuthenticated;
    }
}

在canActivate函数中，我们正在检查用户是否被认证，”getAuthStatus “方法返回一个布尔值。所以基于这个值，我们从canActivate方法中返回这个值。如果 “getAuthStatus “的返回值意味着用户已被认证，那么我们就允许用户访问该页面，否则我们就将用户导航到登录页面。

然后，我们必须更新我们的路由文件，使哪些路由受到AuthGuard的保护，哪些路由对每个用户都是可访问的。

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 { }

在路由数组中，我们为 “创建 “和 “编辑 “路由提供了canActivate:[AuthGuard]，因此这两条路由只对通过认证的用户开放，其他路由则对所有用户开放。

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

请确保在这个路由文件中导入AuthGuard，并在@NgModule提供者中添加它。