首页 > 其他分享 >关于 Angular 中的 AuthGuard

关于 Angular 中的 AuthGuard

时间:2023-05-16 17:58:04浏览次数:34  
标签:AuthGuard component auth 关于 import canActivate Angular 路由

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 路由。

标签:AuthGuard,component,auth,关于,import,canActivate,Angular,路由
From: https://www.cnblogs.com/sap-jerry/p/17406381.html

相关文章

  • Angular ngZone 源码解析
    AngularngZone源码解析ngZone源码中有几个常用的方法,属性,这里做一个整理与总结Zone.js简介ZoneJs职责拦截异步任务的调度封装回调函数用于异常处理以及异步操作中zone的跟踪提供往zone中添加数据的方法提供上下文特定的最后一帧错误处理拦截阻塞方法Zone的底层异......
  • 关于包的安装路径以及调用问题
    今天想要用jupyternotebook来调用已经下载到anconda的opencv,但是在importcv2的时候还是会报错,因此认为是包的调用出现问题这里我要科普一个概念,一般在anacondaprompt下面的base下下载的包,都是下载在了conda里面,并没有下载到我们的虚拟环境里面,因此如果我们要想调用这个包,就需......
  • 用QWebsocket时关于信号槽的一个坑
    https://blog.csdn.net/zerolity/article/details/94746977 坑描述:connect(&m_webSocket,&QWebSocket::textMessageReceived,this,&BWebsocket::onTextMessageReceived);1和主机通过websocket通信。接收主机发的指令有时导致重复接收。信号发送者和接受者同一线程。onTe......
  • 方芳:关于数字乡村对农村公路的启示
       关于数字乡村对农村公路的启示      武汉市江夏区交通局  武汉工程大学 土木工程与建筑学院    武汉市江夏区公路局     武汉市江夏区公路建筑工程公司   武汉市江夏城投集团有限公司    武汉江夏路桥工程总公司  ......
  • golang 关于 Inf,-Inf,Infinity,-Infinity 等无穷大无穷小特殊字符转换问题
    记录一个比较个例的问题,某天API突然写入数据失败,原因是数据库写入长度超出,并且从日志中发现了"Infinity"这样的特殊字符串英语渣渣的我有懵,客户端发过来的数据,API都会转换为对应的数据类型,再进行数据库写入,如果是字符串,最多就转成0,怎么会长度超出万变不离其宗,肉眼看不出的问题......
  • 关于我
    关于作者hello......
  • Logstash关于日志清洗记录学习及应用
    logstash日志清洗:日志清洗任务,给了我乱七八糟资料之后看的一脸懵,最后决定自己动手整理整理这样有头绪点,记录一下自己学习过程。其中涉及到一些ip内容的我都改为ip,其他保持一致,欢迎大家一起讨论,我也是刚开始学习这个,如有写的不对请多指教。一、学习阶段1、首先理解logstash中各个......
  • 关于测试用例的步骤和预期结果的看法
    一、步骤:1)操作步骤中的对象要具体而且是唯一的,后台的配置可以不需要给出全路径,但是文件或者操作页面的描述要清晰,唯一,且没有歧义举例:a、修改后台xxx模块的XXX.conf配置文件,修改后重启,步骤中可以不用给出配置文件的路径,但是必须说明是具体的哪个文件,不能只是说修改后台配置  ......
  • 关于uniapp条件编译ifdef, ifndef, endif
     标识含义: 示例  转载于https://lequ7.com/guan-yu-uniappuniapp-tiao-jian-bian-yi-ifdefifndefendif.html......
  • 关于海明码
    前置知识:海明码:海明码一般只能纠1位错。海明码默认进行偶校验(除非特殊说明使用奇校验)。海明码是一串只由0和1组成的序列奇偶校验:奇校验:一串由0和1组成的序列中1的个数如果为偶数则在前面加个1,使1的个数变成奇数,否则加0。偶校验:一串由0和1组成的序列中1的个数如果为......