路由守卫

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

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

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

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. Executors类的newFixedThreadPool, newCachedThreadPool, newScheduledThreadPool

    Executors 类对 ThreadPoolExecutor 的构造函数进行了封装,使用该类可方便地创建线程池. 1. newFixedThreadPool public static Execut ...

  2. spring boot 学习(七)小工具篇:表单重复提交

    注解 + 拦截器:解决表单重复提交 前言 学习 Spring Boot 中,我想将我在项目中添加几个我在 SpringMVC 框架中常用的工具类(主要都是涉及到 Spring AOP 部分知识).比如 ...

  3. 自定义div 拖动。键盘上下左右键移动,ctrl+Q控制是否可以移动,ctrl+回车,返回初始状态

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. HTML(一)基础

    一.HTML简介 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接 ...

  5. VM VirtualBox虚拟机与物理主机之间的复制

    物理主机: 系统:Ubuntu 11.04 X86_64 虚拟机: 系统:Windows XP Pack3 点击虚拟机的 设备->安装增强功能即可 安装后两系统之间的复制,粘贴可正常使用,如同一 ...

  6. Ubuntu:系统启动服务

    系统启动服务 针对Ubuntu 5级别服务的说明 安装sysv-rc-conf sudo apt-get install sysv-rc-conf acpi-support 高级电源管理支持 acpi ...

  7. python3.6 ubuntu

    apt-get install python3.6-dev 安装 pip install mysqlclient 必备

  8. [C#] 网站程序ASP.NET的性能诊断 - CPU分析

    微软提供了标准的CLR性能分析类库 https://github.com/Microsoft/clrmd 这个类库是开源的代码.能够获取CLR runtime里面几乎所有的信息. 如何获取clrmd编 ...

  9. Windows下C++删除清除map

    清除单map(非嵌套map) #include<map> #include<string> #include<iostream> using namespace s ...

  10. ACM 常见词汇

    rectangular 美:  [rek'tæŋɡjələr] 英:  [rek'tæŋɡjʊlə(r)] adj. 矩形的:成直角的   grid 美:  [ɡrɪd] 英:  [ɡrɪd] n. ...