路由守卫

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

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

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

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. DeepLearning (三) 预处理：主成分分析与白化

    [原创]Liu_LongPo 转载请注明出处 [CSDN]http://blog.csdn.net/llp1992 PCA算法前面在前面的博客中已经有介绍,这里简单在描述一下,更详细的PCA算法请参考 ...

  2. SQL Server 调优系列基础篇 - 常用运算符总结

    前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握. 通过本篇可以了解我们平常所写的T-SQL语句,在SQL ...

  3. bzoj1677

    题解: 背包 每一个1<<i都是无限量 代码: #include<bits/stdc++.h> using namespace std; ,M=1e9; int n,dp[N] ...

  4. 关于 lerp();

    value lerp(value s, value a, value b ); 该函数返回的值为:a + s * (b - a) ,是一个处于 [a, b] 之间的值. 当s=0, 该函数返回a :当 ...

  5. hibernate级联 cascade属性(转）

    在Hibernate中,针对持久化实体的配置文件中有Cascade这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...

  6. Beta 冲刺（7/7)

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10129067.html 作业博客:https://edu.cnblogs.com/campus ...

  7. Effective C++阅读笔记

    条款1:视C++为一个语言联邦:C.Object-Oriented C++.Template C++.STLC++高效编程守则视情况而变化,取决于使用C++的哪一个部分 条款2:尽量以const,en ...

  8. Java第八次作业--数据库编程

    Deadline: 2017-5-18 23:00 一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握应用JDBC访问数据库的基本步骤 掌握DriverManager类.Connection接 ...

  9. 关于Gson无法将匿名类转化为json字符串的问题

    在使用gson过程中,一般会将数据存在一个对象模型中,使用gson将模型转换成json字符串用于数据交互. 代码形如: ArrayList<String> list = new Array ...

  10. python编码问题 decode与encode

    参考: http://www.jb51.net/article/17560.htm 如果要在python2的py文件里面写中文,则必须要添加一行声明文件编码的注释,否则python2会默认使用ASCI ...