angular2系统学习 - 路由与导航(4)

1.路由守卫

路由守卫其实就是一种拦截机制，在进入离开视图等时的拦截行为。
路由守卫可以看作是挂在路由上连接视图组件的拦截器，在进入、离开视图等事件监听上触发拦截。
我们可以把每一个路由看成一个中间块，一边连接视图，一边连接守卫。
路由器支持多种守卫：

用CanActivate来处理导航到某路由的情况。
用CanActivateChild处理导航到子路由的情况。
用CanDeactivate来处理从当前路由离开的情况。
用Resolve在路由激活之前获取路由数据。
用CanLoad来处理异步导航到某特性模块的情况。

当触发守卫时内部返回true，则继续运行；返回false则停止导航。常用于权限控制。

守卫还可以告诉路由器导航到别处。

2.如何配置守卫？

这里先说下如何创建一个守卫；

2.1首先创建一个守卫服务，用Injectable装饰器装饰的类，我们需要哪种守卫，就在创建的守卫服务类后继承那种服务的接口

    export class GuardService implements CanActivate { }
继承接口以后，我们就要实现这个接口，将接口开头字母小写就是实现方法名。canActivate()，方法返回布尔值，表示是否继续导航。
实现守卫方法内的参数一般只有两个:
route: ActivatedRouteSnapshot  //包含了即将被激活的路由。
state: RouterStateSnapshot        //包含了该应用即将到达的状态。

import { Injectable } from '@angular/core';
import { CanActivate, //守卫，处理导航到某路由的情况。Router,ActivatedRouteSnapshot,  //RouterStateSnapshot, //CanActivateChild //守卫，处理导航到子路由的情况} from '@angular/router';@Injectable()
export class Guard implements CanActivate{canActivate( route: ActivatedRouteSnapshot , state: RouterStateSnapshot){if(boolean) return true;else return false;}
}

到这里守卫服务就已经创建好了。

2.2将守卫挂接到路由。

在routing.module中，将守卫服务配置到路由数组中。

{path: '',component:ParAComponent,canActivate:[ GuardService ]
}

每个守卫在路由数组中都有相应的属性名。
一个路由项可以挂接多个路由守卫
在这里可以看到，ng2以路由为中心，将视图组件、守卫都捆绑到了路由数组中。

当路由导航至ParAComponent中时，会先进入守卫的实现方法中，如果方法返回true，则继续往下走；如果返回false，则不进入这个视图。

angular2系统学习 - 路由与导航(4)相关推荐

angular2系统学习 - 路由与导航(2)
angular2系统学习 - 路由与导航(2) 1.模块注册路由 NgModule注册路由分根模块(AppModule)与子模块注册路由,只有根模块AppModule才能使用forRoot()方法. ...
Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
Blazor 路由及导航开发指南
翻译自 Waqas Anwar 2021年4月2日的文章 <A Developer's Guide To Blazor Routing and Navigation> [1] 检查传入的请 ...
linux中ftp的工作原理,Linux系统学习十二、VSFTP服务—简介与原理
1.简介与原理互联网诞生之初就存在三大服务:WWW.FTP.邮件 FTP主要针对企业级,可以设置权限,对不同等级的资料针对不同权限人员显示. 但是像网盘这样的基本没有权限划分. 简介: FTP(Fi ...
前端系统学习篇之HTML
前言该分类目的是系统学习前端知识做的笔记,HTML5+CSS3+JavaScript+Jquery+vue+前端工程化等等,使自己成为一个全栈工程师,学完水平能达初级前端开发工程师以上. HTML简 ...
Flutter之路由与导航
先放效果,瞎写一通,不过我发现自己挺享受自己创作设计的过程的,真的废寝忘食hhh 贴代码 //main.dartimport 'package:flutter/material.dart'; impo ...
云计算具有哪些优势如何快速系统学习云计算
云计算具有哪些优势?如何快速系统学习云计算?近年来,云计算发展迅猛,同时随着大数据.人工智能等研究的不断深入,云计算作为其重要技术和支撑,未来仍会有巨大的发展空间.下面一同来看看吧. 云计算是一种按使 ...
Linux 功能强大的路由器,一款功能强大的路由器系统-软路由-RouterOS
推荐一款路由器系统,头条有很多喜欢使用软路由伙伴可能有很多都不知道RouterOS这个路由系统是,RouterOS 是由拉脱维亚MikroTik 司开发的一种基于linux 内核的路由操作系统.有 ...

angular2系统学习 - 路由与导航(4)

angular2系统学习 - 路由与导航(4)

1.路由守卫

2.如何配置守卫？

2.1首先创建一个守卫服务，用Injectable装饰器装饰的类，我们需要哪种守卫，就在创建的守卫服务类后继承那种服务的接口

2.2将守卫挂接到路由。

angular2系统学习 - 路由与导航(4)相关推荐

最新文章

热门文章