Angular系列教程之路由守卫

文章目录

    • 前言
    • 路由守卫的类型
    • CanLoad
    • CanActivate
    • CanActivateChild
    • CanDeactivate
    • Resolve
    • 总结

前言

在Angular中,路由守卫是一个非常有用的功能,可以帮助我们控制用户在导航过程中的权限和访问限制。通过使用路由守卫,我们可以拦截导航并根据需求决定是否允许用户继续访问特定的页面或组件。

路由守卫的类型

Angular提供了以下几种类型的路由守卫:

  • CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载。这里是指对应组件的代码)。

  • CanActivate:用于控制是否允许用户访问目标路由。

  • CanActivateChild:用于控制是否允许用户访问目标路由的子路由。

  • CanDeactivate:用于控制是否允许用户离开当前路由。

  • Resolve:用于在路由激活之前获取必要的数据。

下面我们将逐个介绍这些路由守卫,并给出相应的示例代码。

CanLoad

进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载。这里是指对应组件的代码)。

下面是一个示例代码,展示如何使用CanLoad守卫来控制访问权限:

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router, UrlSegment } from '@angular/router';@Injectable()
export class CanLoadGuard implements CanLoad {constructor(private router: Router) { }canLoad(route: Route,segments: UrlSegment[]) {// 在这里编写你的权限控制逻辑const isAuthenticated = // 检查用户是否已登录if (isAuthenticated) {return true; // 允许导航} else {// 将用户重定向到登录页面this.router.navigate(['/login']);return false; // 拒绝导航}}}

要使用CanLoad守卫,我们需要将它添加到路由配置中的目标路由上,如下所示:

const routes: Routes = [{path: 'dashboard',component: DashboardComponent,canLoad: [CanLoadGuard]},// 其他路由配置...
];

CanActivate

CanActivate守卫用于控制是否允许用户访问目标路由。当导航发生时,CanActivate守卫将被触发,并根据返回的布尔值来允许或拒绝导航。

下面是一个示例代码,展示如何使用CanActivate守卫来控制访问权限:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';@Injectable({providedIn: 'root'
})
export class AuthGuard implements CanActivate {constructor(private router: Router) {}canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {// 在这里编写你的权限控制逻辑const isAuthenticated = // 检查用户是否已登录if (isAuthenticated) {return true; // 允许导航} else {// 将用户重定向到登录页面this.router.navigate(['/login']);return false; // 拒绝导航}}}

在上面的代码中,我们创建了一个名为AuthGuard的服务,并实现了CanActivate接口。在canActivate方法中,我们可以编写自己的权限控制逻辑。如果用户已经登录,我们返回true以允许导航,否则我们将用户重定向到登录页面并返回false拒绝导航。

要使用CanActivate守卫,我们需要将它添加到路由配置中的目标路由上,如下所示:

const routes: Routes = [{path: 'dashboard',component: DashboardComponent,canActivate: [AuthGuard]},// 其他路由配置...
];

CanActivateChild

CanActivateChild守卫用于控制是否允许用户访问目标路由的子路由。它与CanActivate守卫的使用方式类似。

下面是一个示例代码,展示如何使用CanActivateChild守卫来控制访问权限:

@Injectable({providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {constructor(private router: Router) {}canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {// 在这里编写你的权限控制逻辑const isAuthenticated = // 检查用户是否已登录if (isAuthenticated) {return true; // 允许导航} else {// 将用户重定向到登录页面this.router.navigate(['/login']);return false; // 拒绝导航}}}

要使用CanActivateChild守卫,我们需要将它添加到路由配置中的目标路由上,如下所示:

const routes: Routes = [{path: 'admin',component: AdminComponent,canActivateChild: [AuthGuard],children: [// 子路由配置...]},// 其他路由配置...
];

CanDeactivate

CanDeactivate守卫用于控制是否允许用户离开当前路由。当用户尝试离开当前路由时,CanDeactivate守卫将被触发,并根据返回的布尔值来允许或拒绝离开。

下面是一个示例代码,展示如何使用CanDeactivate守卫来控制离开权限:

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';@Injectable({providedIn: 'root'
})
export class DirtyCheckGuard implements CanDeactivate<any> {canDeactivate(component: any,currentRoute: ActivatedRouteSnapshot,currentState: RouterStateSnapshot,nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {// 在这里编写你的离开权限控制逻辑const isDirty = // 检查当前组件是否有未保存的更改if (isDirty) {return confirm('您有未保存的更改,确定要离开吗?'); // 提示用户是否继续离开} else {return true; // 允许离开}}}

在上面的代码中,我们创建了一个名为DirtyCheckGuard的服务,并实现了CanDeactivate接口。在canDeactivate方法中,我们可以编写自己的离开权限控制逻辑。如果当前组件有未保存的更改,我们将提示用户是否继续离开。

要使用CanDeactivate守卫,我们需要将它添加到路由配置中的目标路由上,如下所示:

const routes: Routes = [{path: 'profile',component: ProfileComponent,canDeactivate: [DirtyCheckGuard]},// 其他路由配置...
];

Resolve

Resolve守卫用于在路由激活之前获取必要的数据。它可以帮助我们在加载组件之前获取所需的数据,以便在组件内部使用。

下面是一个示例代码,展示如何使用Resolve守卫来获取数据:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';@Injectable({providedIn: 'root'
})
export class DataResolver implements Resolve<any> {constructor(private dataService: DataService) {}resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<any> | Promise<any> | any {// 在这里编写你获取数据的逻辑return this.dataService.getData();}}

在上面的代码中,我们创建了一个名为DataResolver的服务,并实现了Resolve接口。在resolve方法中,我们可以编写自己的获取数据逻辑。在本例中,我们使用DataService服务来获取数据。

要使用Resolve守卫,我们需要将它添加到路由配置中的目标路由上,如下所示:

const routes: Routes = [{path: 'data',component: DataComponent,resolve: {data: DataResolver}},// 其他路由配置...
];

在上述代码中,我们将DataResolver添加到resolve属性中。这将确保在加载DataComponent之前先获取数据。

总结

路由守卫是Angular中一个非常有用的功能,可以帮助我们控制用户在导航过程中的权限和访问限制。通过使用CanLoad、CanActivate、CanActivateChild、CanDeactivate和Resolve守卫,我们可以实现各种导航控制需求,并为用户提供更好的体验。

示例代码仅为演示目的,你可以根据自己的需求进行修改和扩展。希望本文能够帮助你理解和使用Angular的路由守卫功能!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openssl3.2 - 官方demo学习 - signature - EVP_EC_Signature_demo.c

文章目录 openssl3.2 - 官方demo学习 - signature - EVP_EC_Signature_demo.c概述笔记END openssl3.2 - 官方demo学习 - signature - EVP_EC_Signature_demo.c 概述 EC的签名/验签实现, 摘要算法为 SHA3-512 签名验签时的update铭文可以进行多次. openssl的API封装的真好, 只…

python PyQt5的学习

一、安装与配置 1、环境&#xff1a; python3.7 2、相关模块 pip install pyqt5 pyqt5-tools pyqt5designer 可以加个镜像 -i https://pypi.tuna.tsinghua.edu.cn/simple3、配置设计器 python的pyqt5提供了一个设计器&#xff0c;便于ui的设计 界面是这样的&#xff1a…

springboot实现微信小程序授权登录前后端代码完整版

一个简单的微信授权登录的demo&#xff0c;我这边没有建表&#xff0c;是存到redis里面了&#xff0c;仅供参考&#xff0c;后续可以扩展自己的业务逻辑&#xff0c;把登录信息存在表里面。 前端小程序代码&#xff1a; <view><view class"login-icon">…

ABAP - 读取长文本优化

做程序优化的时候发现在循环里面读取长文本&#xff0c;用&#xff08;READ_TEXT\类的方法&#xff09;读取太消耗性能了&#xff0c;于是用读取底表的方法去取。 DATA lt_stxl_raw TYPE TABLE OF ty_stxl_raw.DATA ls_stxl_raw TYPE ty_stxl_raw.DATA lt_tline TY…

MFC为资源对话框添加消息处理函数和初始化控件

现在我VC6新建了一个对话框工程&#xff1b;又在资源添加了一个新的对话框&#xff0c;并为新的对话框添加了名为CTestDlg的类&#xff1b; 在主对话框的cpp文件包含#include "TestDlg.h"&#xff1b; 在主对话框的cpp文件的OnInitDialog()成员函数中&#xff0c;添…

算法之回溯动态规划贪心

回溯使用场景&#xff1a;求出所有可能的解。 List result; void backtrack(路径,选择列表){if(满足结束条件){result.add(路径);return;}for(选择:选择列表){// 遍历集合中的元素做选择;backtrack(路径,选择列表);撤销选择;} }动态规划使用场景&#xff1a;寻求最优解。 #初…

单列的堆叠柱状图

目的 MSingleColumnStackBarChart类被设计用于创建只有单列的堆叠柱状图&#xff0c;用于血糖数据的统计。以下是封装这个类的目的的详细描述&#xff1a; 抽象复杂性&#xff1a; 通过创建MSingleColumnStackBarChart类&#xff0c;你将复杂的MPAndroidChart库的使用和配置封…

12166 - Equilibrium Mobile (UVA)

题目链接如下&#xff1a; Online Judge 一个很简洁的写法&#xff1a;UVa 12166 Equilibrium Mobile——思路题_equilibrium mobile uva - 12166-CSDN博客 才33行&#xff0c;真的NB坏了…… 我的比较繁琐的代码&#xff08;能AC&#xff09;&#xff0c;比较之下就能发现…

VUE---组件的样式冲突scoped

默认情况 &#xff1a;写在组件中的样式会 全局生效 &#xff0c;因此很容易造成多个组件之间的样式冲突问题。 1、 全局样式 &#xff1a; 默认组件中的样式会作用到全局 2、 局部样式 &#xff1a; 可以给组件加上 scoped 属性&#xff0c; 让样式只作用于当前组件 sc…

FastGPT + Xinference + OneAPI:一站式本地 LLM 私有化部署和应用开发

Excerpt 随着 GPTs 的发布,构建私有知识库变得无比简易,这为个人创建数字化身份、第二大脑,或是企业建立知识库,都提供了全新的途径。然而,基于众所周知的原因,GPTs 在中国的使用依然存在诸多困扰和障碍。因此,在当… 随着 GPTs 的发布,构建私有知识库变得无比简易,这…

React全局状态管理

redux是一个状态管理框架&#xff0c;它可以帮助我们清晰定义state和处理函数&#xff0c;提高可读性&#xff0c;并且redux中的状态是全局共享&#xff0c;规避组件间通过props传递状态等操作。 快速使用 在React应用的根节点&#xff0c;需要借助React的Context机制存放整个…

深入探讨 Go 语言中的 Map 类型

深入探讨 Go 语言中的 Map 类型 Go 语言中的 map 类型是一种非常强大且常用的数据结构&#xff0c;它提供了一种键值对的映射关系。本篇博客将深入讨论 Go 中的 map 类型&#xff0c;包括其基本用法、特性、以及一些最佳实践。 基本概念 1. 声明和初始化 在 Go 中&#xff…

mobi文件怎么转换成pdf?

mobi文件怎么转换成pdf&#xff1f;在数字化时代&#xff0c;电子书籍成为了越来越受欢迎的阅读方式。我们可以通过多种格式的电子书来获取知识和娱乐&#xff0c;其中一种常见的格式就是Mobi文件。Mobi文件是亚马逊公司开发的一种电子书格式&#xff0c;它主要用于Kindle设备和…

SL4010升压恒压电源芯片DC3.7V升压5V、12V、24V/5A

SL4010是一款升压恒压电源芯片&#xff0c;可以将DC3.7V的输入电压升压至5V、12V或24V的输出电压&#xff0c;并可提供高达5A的输出电流。这款芯片采用了先进的升压技术&#xff0c;能够实现高效、稳定的电压转换&#xff0c;同时还具有低噪声、低功耗和低成本等优点。在各种需…

【论文阅读】Consistency Models

文章目录 IntroductionDiffusion ModelsConsistency ModelsDefinitionParameterizationSampling Training Consistency Models via DistillationTraining Consistency Models in IsolationExperiment Introduction 相比于单步生成的模型&#xff08;例如 GANs, VAEs, normalizi…

推荐几个Github高星GoLang管理系统

在Web开发领域&#xff0c;Go语言&#xff08;Golang&#xff09;以其高效、简洁、高并发等特性逐渐成为许多开发者的首选语言。有许多优秀的Go语言Web后台管理系统&#xff0c;这些项目星星众多&#xff0c;提供了丰富的功能和良好的代码质量。本文将介绍一些GitHub高星的GoLa…

学会这个昼夜系统,你也能做出一款饥荒生存类游戏DEMO!

学会这个昼夜系统&#xff0c;你也能做出一款饥荒生存类游戏DEMO&#xff01; 《饥荒》作为生存类游戏的老大哥&#xff0c;深受大家喜爱&#xff0c;这款游戏于2012年年底正式公测上线&#xff0c;距今已有10年的时间&#xff0c;从最初的单机版慢慢推出了联机版&#xff0c;…

Android平台Unity下如何通过WebCamTexture采集摄像头数据并推送至RTMP服务器或轻量级RTSP服务

技术背景 我们在对接Unity下推送模块的时候&#xff0c;遇到这样的技术诉求&#xff0c;开发者希望在Android的Unity场景下&#xff0c;获取到前后摄像头的数据&#xff0c;并投递到RTMP服务器&#xff0c;实现低延迟的数据采集处理。 在此之前&#xff0c;我们已经有了非常成…

大模型学习之书生·浦语大模型5——基于LMDeploy大模型量化部署实践

目录 大模型部署背景 LMDeploy部署 量化 TurboMind API server 动手实践环节

LCR 173. 点名(二分)

一、题目描述 LCR 173. 点名 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 示例 1: 输入: records [0,1,2,3,5] 输出: 4示例 2: 输入: records [0, 1, 2, 3, 4, 5, 6, 8] 输出: 7 二、题目解析…