Angular8路由守卫原理和使用方法


Posted in Javascript onAugust 29, 2019

路由守卫

守卫,顾名思义,必须满足一定的条件得到许可方可通行,否则拒绝访问或者重定向。Angular中路由守卫可以借此处理一些权限问题,通常应用中存储了用户登录和用户权限信息,遇到路由导航时会进行验证是否可以跳转。

4种守卫类型

按照触发顺序依次为:canload(加载)、canActivate(进入)、canActivateChild(进入子路由)和canDeactivate(离开)。

一个所有守卫都是通过的守卫类:

import { Injectable } from '@angular/core';
import {
 CanActivate,
 Router,
 ActivatedRouteSnapshot,
 RouterStateSnapshot,
 CanActivateChild,
 CanLoad,
 CanDeactivate
} from '@angular/router';
import { Route } from '@angular/compiler/src/core';
import { NewsComponent } from '../component/news/news.component';


@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad, CanDeactivate<any> {
 constructor(
  private router: Router
 ) {

 }
 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  // 权限控制逻辑如 是否登录/拥有访问权限
  console.log('canActivate');
  return true;
 }
 canDeactivate(
  component: NewsComponent,
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot) {
  console.log('canDeactivate');
  return true;
 }
 canActivateChild() {
  // 返回false则导航将失败/取消
  // 也可以写入具体的业务逻辑
  console.log('canActivateChild');
  return true;
 }
 canLoad(route: Route) {
  // 是否可以加载路由
  console.log('canload');
  return true;
 }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ErrorComponent } from './error/error.component';
import { AuthGuard } from './core/auth-guard';

const routes: Routes = [
 // 一般情况很少需要同时写多个守卫,如果有也是分开几个文件(针对复杂场景,否则一般使用canActivated足够)
 {
  path: '',
  canLoad: [AuthGuard],
  canActivate: [AuthGuard],
  canActivateChild: [
   AuthGuard
  ],
  canDeactivate: [AuthGuard],
  loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
 },
 {
  path: 'error',
  component: ErrorComponent,
  data: {
   title: '参数错误或者地址不存在'
  }
 },
 {
  path: '**',
  redirectTo: 'error',
  pathMatch: 'full'
 }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

使用场景分析

1.canLoad

默认值为true,表明路由是否可以被加载,一般不会认为控制这个守卫逻辑,99.99%情况下,默认所有app模块下路由均允许canLoad

2.canActivate

是否允许进入该路由,此场景多为权限限制的情况下,比如客户未登录的情况下查询某些资料页面,在此方法中去判断客户是否登陆,如未登录则强制导航到登陆页或者提示无权限,即将返回等信息提示。

3.canActivateChild

是否可以导航子路由,同一个路由不会同时设置canActivate为true,canActivateChild为false的情况,此外,这个使用场景很苛刻,尤其是懒加载路由模式下,暂时未使用到设置为false的场景。

4.CanDeactivate

路由离开的时候进行触发的守卫,使用场景比较经典,通常是某些页面比如表单页面填写的内容需要保存,客户突然跳转其它页面或者浏览器点击后退等改变地址的操作,可以在守卫中增加弹窗提示用户正在试图离开当前页面,数据还未保存 等提示。

场景模拟

登录判断

前期准备:login组件;配置login路由

因为login是独立一个页面,所以app.component.html应该只会剩余一个路由导航

<!-- NG-ZORRO -->
<router-outlet></router-outlet>

取而代之的是pages.component.html页面中要加入header和footer部分变为如下:

<app-header></app-header>
<div nz-row class="main">
 <div nz-col nzSpan="24">
  <router-outlet></router-outlet>
 </div>
</div>
<app-footer></app-footer>

app-routing.module.ts 中路由配置2种模式分析:

// 非懒加载模式
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ErrorComponent } from './error/error.component';
import { AuthGuard } from './core/auth-guard';
import { LoginComponent } from './component/login/login.component';
import { PagesComponent } from './pages/pages.component';
import { IndexComponent } from './component/index/index.component';

const routes: Routes = [
 // 一般情况很少需要同时写多个守卫,如果有也是分开几个文件(针对复杂场景,否则一般使用canActivated足够)
 {
  path: '',
  canLoad: [AuthGuard],
  canActivate: [AuthGuard],
  canActivateChild: [
   AuthGuard
  ],
  canDeactivate: [AuthGuard],
  component: PagesComponent,
  children: [
   {
    path: 'index',
    component: IndexComponent
   }
   // ...
  ]
  // loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
 },
 {
  path: 'login',
  component: LoginComponent,
  data: {
   title: '登录'
  }
 },
 {
  path: 'error',
  component: ErrorComponent,
  data: {
   title: '参数错误或者地址不存在'
  }
 },
 {
  path: '**',
  redirectTo: 'error',
  pathMatch: 'full'
 }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

非懒加载模式下,想要pages组件能够正常显示切换的路由和固定头部足部,路由只能像上述这样配置,也就是所有组件都在app模块中声明,显然不是很推荐这种模式,切换回懒加载模式:

{
  path: '',
  canLoad: [AuthGuard],
  canActivate: [AuthGuard],
  canActivateChild: [
   AuthGuard
  ],
  canDeactivate: [AuthGuard],
  loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
 },

pages-routing.module.ts

初始模板:

const routes: Routes = [
 {
  path: '',
  redirectTo: 'index',
  pathMatch: 'full'
 },
 {
  path: 'index',
  component: IndexComponent,
  data: {
   title: '公司主页'
  }
 },
 {
  path: 'about',
  component: AboutComponent,
  data: {
   title: '关于我们'
  }
 },
 {
  path: 'contact',
  component: ContactComponent,
  data: {
   title: '联系我们'
  }
 },
 {
  path: 'news',
  canDeactivate: [AuthGuard],
  loadChildren: () => import('../component/news/news.module').then(m => m.NewsModule)
 },
]

浏览器截图:

Angular8路由守卫原理和使用方法

明明我们的html写了头部和底部组件却没显示?

路由的本质:根据配置的path路径去加载组件或者模块,此处我们是懒加载了路由,根据路由模块再去加载不同组件,唯独缺少了加载了pages组件,其实理解整个并不难,index.html中有个<app-root></app-root>,这就表明app组件被直接插入了dom中,反观pages组件,根本不存在直接插进dom的情况,所以这个组件根本没被加载,验证我们的猜想很简单:

export class PagesComponent implements OnInit {

 constructor() { }

 ngOnInit() {
  alert();
 }

}

经过刷新页面,alert()窗口并没有出现~,可想而知,直接通过路由模块去加载了对应组件;其实我们想要的效果就是之前改造前的app.component.html效果,所以路由配置要参照更改:

const routes: Routes = [
 {
  path: '',
  component: PagesComponent,
  children: [
   {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full'
   },
   {
    path: 'index',
    component: IndexComponent,
    data: {
     title: '公司主页'
    }
   },
   {
    path: 'about',
    component: AboutComponent,
    data: {
     title: '关于我们'
    }
   },
   {
    path: 'contact',
    component: ContactComponent,
    data: {
     title: '联系我们'
    }
   },
   {
    path: 'news',
    canDeactivate: [AuthGuard],
    loadChildren: () => import('../component/news/news.module').then(m => m.NewsModule)
   },
  ]
 }
];

Angular8路由守卫原理和使用方法

这样写,pages组件就被加载了,重回正题,差点回不来,我们在登录组件中写了简单的登录逻辑:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
 loginForm: FormGroup;
 constructor(
  private fb: FormBuilder,
  private router: Router
 ) { }

 ngOnInit() {
  this.loginForm = this.fb.group({
   loginName: ['', [Validators.required]],
   password: ['', [Validators.required]]
  });
  console.log(this.loginForm);
 }

 loginSubmit(event, value) {
  if (this.loginForm.valid) {
   window.localStorage.setItem('loginfo', JSON.stringify(this.loginForm.value));
   this.router.navigateByUrl('index');
  }
 }
}

守卫中:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  // 权限控制逻辑如 是否登录/拥有访问权限
  console.log('canActivate', route);
  const isLogin = window.localStorage.getItem('loginfo') ? true : false;
  if (!isLogin) {
   console.log('login');
   this.router.navigateByUrl('login');
  }
  return true;
 }

Angular8路由守卫原理和使用方法

路由离开(选定应用的组件是contact组件):

canDeactivate(
  component: ContactComponent,
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  console.log('canDeactivate');
  return component.pageLeave();
 }
{
  path: 'contact',
  canDeactivate: [AuthGuard],
  component: ContactComponent,
  data: {
   title: '联系我们'
  }
 }
pageLeave(): Observable<boolean> {
  return new Observable(ob => {
   if (!this.isSaven) {
    this.modal.warning({
     nzTitle: '正在离开,是否需要保存改动的数据?',
     nzOnOk: () => {
      // 保存数据
      ob.next(false);
      alert('is saving');
      this.isSaven = true;
     },
     nzCancelText: '取消',
     nzOnCancel: () => {
      ob.next(true);
     }
    });
   } else {
    ob.next(true);
   }
  });
 }

默认数据状态时未保存,可以选择不保存直接跳转也可以保存之后再跳转。

Angular8路由守卫原理和使用方法

此场景多用于复杂表单页或者一些填写资料步骤的过程中,甚至浏览器后退和前进的操作也会触发这个守卫,唯一不足的地方时这个守卫绑定的是单一页面,无法统一对多个页面进行拦截。

下一篇介绍路由事件的运用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
angular directive的简单使用总结
May 24 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
You might like
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
环境科学专业求职信
2014/08/04 职场文书
听证通知书
2015/04/24 职场文书
贫困证明书范文
2015/06/16 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
导游词之镜泊湖
2019/12/09 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
MYSQL如何查看操作日志详解
2022/05/30 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers