Angular 路由守卫
1. 路由
Angular路由: 可以控制页面跳转;可以在多视图间切换;
2. 路由守卫
Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开、进入某路由;;; return true
代表可以进入当前路由;return false
代表不可以进入当前路由,但可以进入自定义的路由;
3. 路由守卫与路由的关系
路由守卫只只能应用于路由项上;路由守卫可以应用于多个路由项;每个路由项也可以有多个路由守卫;
路由守卫通过实现如下接口来操作:
canActivate
: 控制是否允许进入路由。(通过return true/false决定)canActivateChild
: 等同 canActivate,只不过针对是所有子路由。canDeactivate
: 控制是否允许离开路由。canLoad
: 控制是否允许延迟加载整个模块。
4. 什么情况下,路由项上需要配置路由守卫属性
当需要某些条件/某个身份才能进入的路由,这时需要在路由项上加入路由守卫属性
5. 路由守卫的使用 (本例主要实现根据不同身份进入不同路由)
第一步: guard.service.ts - 定义路由守卫文件
- 第一种写法: 返回Promise对象
@Injectable()
export class GuardService implements CanActivate {
constructor(private router: Router, private _http: HttpClient) {
}
getIsAdmin() {
return new Promise((resolve) => {
this._http.get('/user/isAdmin').subscribe((resp: boolean) => {
resolve(resp);
});
});
}
// 进入路由守卫
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.getIsAdmin().then((isAdmin) => {
if (isAdmin) { // 如果是管理员, 可以进入当前路由;
return true;
} else {
// 如果不是管理员,不能进入当前路由,进入手动导航的ordinary路由;
this.router.navigateByUrl('/ordinary');
return false;
}
});
}
}
- 第二种写法: 返回Observable对象
@Injectable()
export class GuardService implements CanActivate {
constructor(private router: Router, private _http: HttpClient) {
}
// 进入路由守卫
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this._http.get('/user/isAdmin').map((isAdmin) => {
if (isAdmin) { // 如果是管理员, 可以进入当前路由;
return true;
} else {
// 如果不是管理员,不能进入当前路由,进入手动导航的ordinary路由;
this.router.navigateByUrl('/ordinary');
return false;
}
});
}
}
第二步: app.module.ts - 注册路由文件
@NgModule({
declarations: [AppComponent],
providers: [
GuardService
],
bootstrap: [AppComponent]
})
第三步: app.routing.ts - 给对应的路由项配置路由守卫
// 当导航到front时,需要进入路由守卫的canActivate类进行判断是否可以进入此路由
// 什么时候需要在路由项上加路由守卫??当需要某些条件/某个身份才能进入的路由,这时需要在路由项上加入路由守卫属性
export const routes: Routes = [
{
path: '',
component: AppComponent,
children: [
{path: '', redirectTo: 'front', pathMatch: 'full'},
{path: 'front', component: FrontendComponent, canActivate: [GuardService]},
{path: 'ordinary', component: OrdinaryComponent}
]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true})],
exports: [RouterModule]
})
export class RoutingModule {
}
Angular 路由守卫的更多相关文章
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- angular路由守卫
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...
- angular4.0 路由守卫详解
在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- Angular路由——路由守卫
一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- Angular入门到精通系列教程(13)- 路由守卫(Route Guards)
1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...
- Angular 4 路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...
随机推荐
- Oracle - SQL语句实现数据库快速检索
SQL语句实现数据库快速检索 有时候在数据库Debug过程中,需要快速查找某个关键字. 1:使用PLSQL Dev自带的查找数据库对象,进行对象查找 缺点:查找慢.耗时. 2:使用SQL语句对数据库对 ...
- import同目录的py文件 :ModuleNotFoundError: No module named 'pdf'
报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/2.NLP/2.获取数据源和规范化/5.crea ...
- E-triples II_2019牛客暑期多校训练营(第四场)
求用n个3的倍数的数按位或出数字a的方案数有多少种(0也算3的倍数) 题解 若数b的每个二进制位上的1,在a中也为1,则称b为a的子集 容易知道任意个a的子集按位或出来的结果还是a的子集 若问题改为按 ...
- POJ 3070 Fibonacci 矩阵快速幂模板
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18607 Accepted: 12920 Descr ...
- CF992C Nastya and a Wardrobe 数学 第四道
Nastya and a Wardrobe time limit per test 1 second memory limit per test 256 megabytes input standar ...
- android CTS 命令
> h //help Host: help: show this message help all: show the complete tradefed help exit: grace ...
- window下tomcat的下载安装和环境配置
一.下载安装tomcat 去官网:http://tomcat.apache.org/ 下载自己所需要的版本,解压在没有中文的文件夹路径下. 直接打开压缩包下面,进入bin目录,双击startup.b ...
- C#中将表示颜色的string转换成Color
场景 在Winform中需要存储某控件的Color属性,存储的是string字符串, 然后再对控件进行赋值时需要将string转换成Color. 实现 myPane.YAxis.Color = Sys ...
- VMware Ubuntu 19最新安装详细过程
ubuntu可以说是目前最流行的Linux改造版了(如果安卓不算的话),现在的很多服务器都是linux系统的,而自己属于那种前端也搞,后台也搞,对框架搭建也感兴趣,但是很多生产上的框架和工具都是安装在 ...
- 强大的时间处理库 moment
中文文档: http://momentjs.cn/docs/ 常用方法 1.当前时间对象 moment () / 指定时间对象 moment("2019-09-19 08:00:0 ...