在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。

当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢?

其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单。

Angular 的 Route 路由参数中除了熟悉的 pathcomponent 外,还包括四种是否允许路由激活与离开的属性。

  • canActivate: 控制是否允许进入路由。
  • canActivateChild: 等同 canActivate,只不过针对是所有子路由。
  • canDeactivate: 控制是否允许离开路由。
  • canLoad: 控制是否允许延迟加载整个模块。

这里我们只讲canActivate的用法

注册RouteguardService服务

代码如下,这个是完整的守卫逻辑;每一步都写好了注释,我就不细说了,看注释就明白了;

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Router } from "@angular/router";
import userModel from '../model/user.model';
@Injectable()
export class RouteguardService implements CanActivate{ constructor(
private router: Router
) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{
// 返回值 true: 跳转到当前路由 false: 不跳转到当前路由
// 当前路由名称
var path = route.routeConfig.path;
// nextRoute: 设置需要路由守卫的路由集合
const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = userModel.isLogin; // 是否登录
// 当前路由是nextRoute指定页时
if (nextRoute.indexOf(path) >= ) {
if (!isLogin) {
// 未登录,跳转到login
this.router.navigate(['login']);
return false;
}else{
// 已登录,跳转到当前路由
return true;
}
}
// 当前路由是login时
if (path === 'login') {
if (!isLogin) {
// 未登录,跳转到当前路由
return true;
}else{
// 已登录,跳转到home
this.router.navigate(['home']);
return false;
}
}
} }

上面的代码中,有这句代码:import userModel from '../model/user.model';

user.model用来记录用户的状态值以及其他属性,代码如下

let userModel = {
isLogin: false, // 判断是否登录
accout: '',
password: '',
}; export default userModel;

在app-routing.module.ts中配置路由守卫

首先注入RouteguardService服务,然后在需要守卫的路由配置中加入:canActivate: [RouteguardService]

这样在写有canActivate的路由中,都会调用RouteguardService服务,代码如下:

import {NgModule} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from "./page/home/home.component";
import {GoodDetailComponent} from "./page/good-detail/good-detail.component";
import {CartComponent} from "./page/cart/cart.component";
import {ProfileComponent} from "./page/profile/profile.component";
import {GoodListComponent} from "./page/good-list/good-list.component";
import { RouteguardService } from './service/routeguard.service';
import { LoginComponent } from './page/login/login.component'; const routes: Routes = [
{
path: '', // 初始路由重定向[写在第一个]
redirectTo: 'home',
pathMatch: 'full' // 必须要设置
},
{
path: 'login',
component: LoginComponent,
canActivate: [RouteguardService]
},
{
path: 'home',
component: HomeComponent,
canActivate: [RouteguardService]
},
{
path: 'good-detail',
component: GoodDetailComponent,
canActivate: [RouteguardService]
},
{
path: 'good-list',
component: GoodListComponent,
canActivate: [RouteguardService]
},
{
path: 'cart',
component: CartComponent,
canActivate: [RouteguardService]
},
{
path: 'profile',
component: ProfileComponent,
canActivate: [RouteguardService]
},
{
path: '**', // 错误路由重定向[写在最后一个]
redirectTo: 'home',
pathMatch: 'full' // 必须要设置
},
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

ok,工作量还挺大的,大家慢慢研究吧

angular4.0 路由守卫详解的更多相关文章

  1. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  2. IIS7.0 Appcmd 命令详解和定时重启应用池及站点的设置

    IIS7.0 Appcmd 命令详解 废话不说!虽然有配置界面管理器!但是做安装包的时候命令创建是必不可少的!最近使用NSIS制作安装包仔细研究了一下Appcmd的命令,可谓是功能齐全. 上网查了些资 ...

  3. loadrunner11.0 安装破解详解使用教程

    loadrunner11.0 安装破解详解使用教程 来源:互联网 作者:佚名 时间:01-21 10:25:34 [大 中 小] 很多朋友下载了loadrunner11但不是很会使用,这里简单介绍下安 ...

  4. Apache2.2+Tomcat7.0整合配置详解

    一.简单介绍 Apache.Tomcat Apache HTTP Server(简称 Apache),是 Apache 软件基金协会的一个开放源码的网页服务器,可以在 Windows.Unix.Lin ...

  5. IIS7.0 Appcmd 命令详解

    原文 IIS7.0 Appcmd 命令详解 一:准备工作 APPcmd.exe 位于 C:\Windows\System32\inetsrv 目录 使用 Cd c:\Windows\System32\ ...

  6. Android EventBus 3.0 实例使用详解

    EventBus的使用和原理在网上有很多的博客了,其中泓洋大哥和启舰写的非常非常棒,我也是跟着他们的博客学会的EventBus,因为是第一次接触并使用EventBus,所以我写的更多是如何使用,源码解 ...

  7. QuartusII13.0使用教程详解(一个完整的工程建立)

    好久都没有发布自己的博客了,因为最近学校有比赛,从参加到现在都是一脸懵逼,幸亏有bingo大神的教程,让我慢慢走上了VIP之旅,bingo大神的无私奉献精神值得我们每一个业界人士学习,向bingo致敬 ...

  8. Admin注册和路由分发详解

    Admin注册和路由分发详解 1.启动 #autodiscover_modules('admin', register_to=site) 2.注册 1.单例对象 admin.site = AdminS ...

  9. RxJava2.0的使用详解

    RxJava2.0的使用详解 1,初识RxJava RxJava就是一种用Java语言实现的响应式编程,来创建基于事件的异步程序 RxJava是一个基于事件订阅的异步执行的一个类库,目前比较火的一些技 ...

随机推荐

  1. Uva 12436 Rip Van Winkle's Code

    Rip Van Winkle was fed up with everything except programming. One day he found a problem whichrequir ...

  2. Linux性能及调优指南(翻译)之Linux进程管理

    本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.1节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...

  3. lufylegend练习(1)帧速率

    近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...

  4. Nginx平台构架

    深入理解Nginx模块发开与架构解析读书笔记. nginx在启动后,在unix系统中会以daemon的方式(能够手动关闭 nginx.conf daemon off)在后台执行,后台进程包括一个mas ...

  5. 注册Azure AD 应用程序

    作者:陈希章 发表于2017年3月22日 在此前的文章中,我给大家介绍了分别用Graph 浏览器以及第三方工具(POSTMAN)快速体验Microsoft Graph的功能,其中有一个重要的环节就是, ...

  6. linux应用态下的时间

    1.时间值 1.1 日历时间(UTC) 该值是自1 9 7 0年1月1日0 0 : 0 0 : 0 0以来国际标准时间( U T C)所经过的秒数累计值(早期的手册称 U T C为格林尼治标准时间) ...

  7. C#:将.csv格式文件转换成.xlsx格式文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. 用Inferno代替React开发高性能响应式WEB应用

    什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...

  9. linux定时器crontab

    linux定时器crontab用法: 1.基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示 ...

  10. 小白的Python之路 day3 函数

    1.函数基本语法及特性 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况,当cpu\memory\disk等指标的使用量超过阀值时即发邮件报警,你掏空了所有的知识量,写出了以下代码 1 2 ...