Angular路由守卫 canActivate
作用
canActivate
控制是否允许进入路由。
canActivateChild
等同 canActivate,只不过针对是所有子路由。
关键代码
创建路由守卫
import { Injectable } from '@angular/core';
import {
CanActivate,
Router,
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild,
} from '@angular/router';
@Injectable()
export class CanActivateGuard implements CanActivate, CanActivateChild {
constructor(
private _router: Router,
) { }
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): boolean {
//在这里判定是否跳转目标路由
//如果可以跳转页面,返回true,不能,则返回false
//建议逻辑
//1.是否登录
//2.访问是否要求权限
//3.查询当前登录用户是否拥有目标权限
//如果不符合条件,则根据selectBestRoute()方法返回其他页面
//这里的permission是在routes-routing.module.ts中data:{permission:'yourPermission'}传参过来的内容
console.log('该页面所需权限:'+route.data['permission']);
return true;
}
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): boolean {
return this.canActivate(route, state);
}
}
设置路由守卫
{
path: 'can-activate',
component: CanActivateComponent,
//权限permission,CanActivateGuard判定
data:{permission:'yourPermission',title: '你的标题'},
//设置路由守卫为CanActivateGuard
canActivate: [CanActivateGuard],
}
示例代码
参考资料
Angular路由守卫 canActivate的更多相关文章
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- angular路由守卫
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- angular4.0 路由守卫详解
在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...
- angular 路由
在路由时传递数据 1. 在查询参数中传递数据 /product?id=1&name=2 => ActivatedRoute.queryParams[id] 2.在路由路径中传递数据 {p ...
- Angular路由——路由守卫
一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- Angular入门到精通系列教程(13)- 路由守卫(Route Guards)
1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...
随机推荐
- Ditto —— windows 剪贴板增强小工具(复制粘贴多条记录)
Windows 虽然不断在升级,但系统自带的剪贴板功能却仍然弱爆了 (只能保留一条记录). Ditto 下载地址:http://sourceforge.net/projects/ditto-cp/fi ...
- AHB接口转APB
AHB接口转APB 情景 有一个以AHB接口时序设计的IP,现在需将其移至APB总线上,即将使用APB接口时序驱动该IP. 基本思路 将APB的接口信号映射到AHB的接口信号 要点 APB挂接在AHB ...
- BZOJ 1588 HNOI2002 营业额统计 裸Treap
题目大意:...题目描写叙述不全看这里好了 给定一个序列 对于每一个元素我们定义该数的最小波动值为这个数与前面全部数的差中的最小值(第一个数的最小波动值为第一个数本身) 求最小波动值之和 找近期的数仅 ...
- iOS开发webView的使用二
#import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property ...
- 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏
参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...
- nas docker xunlei
http://bbs.xunlei.com/thread-389018-1-1.html 首先,启动远程服务,找到你的设备IP,在浏览器里输入以下地址,host换成你设备的IP http://host ...
- JAVA生成二维码并转化为二进制在页面展示
引用jar包: zxing的core包,下载路径可参考:http://download.csdn.net/detail/sxg0205/9461106 java代码: 引用包: import java ...
- [React] Recompose: Theme React Components Live with Context
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...
- 【codeforces 750E】New Year and Old Subsequence
time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- 浅谈 Redis 与 MySQL 的耦合性以及利用管道完成 MySQL 到 Redis 的高效迁移
http://blog.csdn.net/dba_waterbin/article/details/8996872 ㈠ Redis 与 MySQL 的耦合性 在业务架构早期.我们 ...