Angular中AuthGuard路由守卫的创建使用

更新时间：2023年07月31日 10:54:17 作者：JerryWang_汪子熙

这篇文章主要为大家介绍了Angular中AuthGuard路由守卫的创建使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Angular中的AuthGuard

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&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | 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 来保护一个路由，我们需要在路由配置中将 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 路由。

以上就是Angular中AuthGuard路由守卫的创建使用的详细内容，更多关于Angular AuthGuard创建使用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

python爬取安居客二手房网站数据(实例讲解)
下面小编就为大家带来一篇python爬取安居客二手房网站数据(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Angularjs的启动过程分析
本篇文章主要介绍了Angularjs的启动过程分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
AngularJS折叠菜单实现方法示例
这篇文章主要介绍了AngularJS折叠菜单实现方法,结合完整实例形式分析了AngularJS实现折叠菜单的具体步骤与相关操作技巧,需要的朋友可以参考下
2017-05-05
详解AngularJs中$resource和restfu服务端数据交互
之前小编和大家分享过使用$http同服务器进行通信，但是功能上比较简单，angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。
2016-09-09
举例讲解AngularJS中的模块
这篇文章主要介绍了AngularJS中的模块,文中讲到了其应用模块和控制器模块的例子,需要的朋友可以参考下
2015-06-06
Angular.js自动化测试之protractor详解
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架，下面这篇文章主要给大家介绍了angular.js自动化测试之protractor的相关资料，需要的朋友可以参考下。
2017-07-07
angular+webpack2实战例子
本篇文章主要介绍了angular+webpack2实战例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
angular4模块中给标签添加背景图的实现方法
下面小编就为大家带来一篇angular4模块中给标签添加背景图的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
highcharts 在angular中的使用示例代码
本篇文章主要介绍了highcharts 在angular中的使用示例代码，非常具有实用价值，需要的朋友可以参考下
2017-09-09
AngularJS实现标签页的两种方式
这篇文章分别给大家介绍了AngularJS实现标签页的两种方式，一种是通过普通指令实现标签页，另外一种是通过自定义指令实现的标签页，有需要的朋友们可以来参考借鉴，下面来一起看看吧。
2016-09-09