路由守卫

只有当用户已经登录并拥有某些权限时才能进入某些路由

一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由

当用户未执行保存操作而试图离开当前导航时提醒用户

CanActivate: 处理导航到某种路由的情况

CanDeactivate: 处理从当前路由离开的情况

Resolve:在路由激活之前获得路由数据

一.CanActivate

1. 创建login.guard.ts

2. 使用路由守卫

当canActivate为ture时,才能路由到产品组件

二、CanDeactivate

1. 创建unsavd.guard.ts 定义如下:

2. 配置

3. 效果图

点击“主页”时弹出是否确认离开, 点击确定才能进入“主页”

三、Resolve

1. 创建product.resolve.ts

Product为要guard的数据类型

定义如下:

2. 路由配置

Angular 4 路由守卫的更多相关文章

  1. angular 2+ 路由守卫

    1. 定义接口名称 /domain/login-guard.ts export interface LoginGuard { data: any; msg: string; status: boole ...

  2. Angular4.x通过路由守卫进行路由重定向,实现根据条件跳转到相应的页面

    需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册 ...

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

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

  4. angular路由守卫

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

  5. Angular路由——路由守卫

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

  6. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  7. Angular路由守卫 canDeactivate

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

  8. Angular 路由守卫

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

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

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

随机推荐

  1. spring--mvc用戶注册用户名验重

    spring--mvc用戶注册用户名验重 注册是验证用户名是否重复.post方法,当表单的用户名文本框失去焦点时,由ajax方法指定,进行@RequestMapping指定的url提交时调用的方法. ...

  2. jconsole工具使用----jvm内存泄漏问题

    转载地址:https://www.cnblogs.com/baihuitestsoftware/articles/6405580.html Jconsole,Java Monitoring and M ...

  3. 关于std::map的第三个参数

    1.map的其中一个构造函数有第三个参数,可以直接定义map的key值得排序规则, 默认为std::less,即按“<”运算符进行排序 map<string, int> mapWor ...

  4. 【译】MVC3 20个秘方-(15)使用CAPTCHA去防止恶意软件自动提交评论(防灌水)

    [译]MVC3 20个秘方-(15)使用CAPTCHA去防止恶意软件自动提交评论(防灌水)   问题 有种不太幸运的情况,有人用自动程序去提交表单,在整个互联网中造成大量的垃圾.为了防止这种情况的方法 ...

  5. C++字符串函数之append()、insert()

    仅记录自己比较容易忘的几个: B.insert(1,A,2,2) 将A中的从第3个字符开始的2个字符插入到B的第1个字符后面(字符串A和B实际上分别是const char [5]和const char ...

  6. 项目使用Nuget,然后SVN checkout后显示缺少引用

    如下图黄色叹号: 解决方案: 1.先生成解决方案 2.执行如下: 这时候Nuget是存在了,但是还是显示缺少引用: 那么最后一步, 输入   :Update-Package -reinstall

  7. 注解配置定时任务——@Scheduled

    Java中注解@Scheduled 的注解代码如下: @Target({ElementType.METHOD, ElementType.ANNOTATION_TYPE}) @Retention(Ret ...

  8. AngularJS中的DOM value与view value

    在看AngularJS的文档的时候经常会见到三个名词:DOM value.view value和model value. model value是模型值,view value是视图值,可这个DOM v ...

  9. oracle不小心更新了数据库中的所有内容后的恢复

    开发过程中,在更新数据库中的某一条数据时,由于疏忽忘记加where判断条件了,这时更新会提示是否要更新全部数据,但是由于自己没有仔细看提示导致直接点确定并commit了,导致数据库中所有数据的相关字段 ...

  10. jquery中使用jsonp

    1 .关于jsonp的原理等,请看下面的文章,说的很明白. http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery. ...