作用

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路由守卫 canActivate的更多相关文章

  1. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

  2. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  3. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...

  4. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  5. angular4.0 路由守卫详解

    在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...

  6. angular 路由

    在路由时传递数据 1. 在查询参数中传递数据 /product?id=1&name=2 => ActivatedRoute.queryParams[id] 2.在路由路径中传递数据 {p ...

  7. Angular路由——路由守卫

    一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...

  8. Angular 从入坑到挖坑 - 路由守卫连连看

    一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...

  9. Angular入门到精通系列教程(13)- 路由守卫(Route Guards)

    1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...

随机推荐

  1. ZOJ Special AC String 水

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3702 题目大意: 对于给定的一个字符串,满足如下要求输出AC,否则WA(好吧我 ...

  2. 【topcoder SRM 702 DIV 2 250】TestTaking

    Problem Statement Recently, Alice had to take a test. The test consisted of a sequence of true/false ...

  3. Linux下kill进程脚本

    Linux下kill进程脚本 在Linux有时会遇到需要kill同一个程序的进程,然而这个程序有多个进程,一一列举很是繁琐,使用按名字检索,统一kill Perl脚本 使用方法 kill_all.pl ...

  4. URAL 1542. Autocompletion 字典树

    给你最多10w个单词和相应的频率 接下来最多1w5千次询问 每次输入一个字符串让你从前面的单词中依照频率从大到小输出最多10个以该字符串为前缀的单词 開始把单词建成了字典树 然后每次询问找到全部满足条 ...

  5. 《大型网站技术架构》1:概述 分类: C_OHTERS 2014-05-07 20:40 664人阅读 评论(0) 收藏

    参考自<大型网站技术架构>第1~3章 1.大型网站架构演化发展历程 (1)初始阶段的网站架构:一台服务器分别作为应用.数据.文件服务器 (2)应用服务和数据服务分离:三台服务器分别承担上述 ...

  6. mysql 按日期分组

    select DATE_FORMAT(NOW(),'%Y%m%d') days,count(caseid) count from tc_case group by days; //date_forma ...

  7. Notepad++打开xml文件显示crlf的问题

    如图所示,显示CRLF,  CRLF其实是换行符. 所以在下图所示设置下显示行尾符不显示即可.

  8. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  9. update中加入select最常用的update语法

    update中加入select最常用的update语法 (转) (2010-08-20 11:40:16) 转载▼ 标签: it 分类: SQL 最常用的update语法是:UPDATE <ta ...

  10. Erlang 位串和二进制数据

    http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=25876834&id=3300393 因为在本人工作中,服务端Erla ...