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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js倒计时小程序
Nov 05 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
关于vue面试题汇总
Mar 20 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
PHP5函数小全(分享)
2013/06/06 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
onpropertypchange
2006/07/01 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
js实现小星星游戏
2020/03/23 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
彻底搞懂Python字符编码
2018/01/23 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
企业后勤岗位职责
2014/02/28 职场文书
篝火晚会主持词
2014/03/25 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python