Angular8 路由守卫原理与使用

时间  2019-11-16
标签 angular8 angular 路由 守卫 原理 使用 栏目 AngularJS 繁體版
原文   原文链接

路由守卫

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

4种守卫类型

按照触发顺序依次为：canload（加载）、canActivate（进入）、canActivateChild（进入子路由）和canDeactivate（离开）。
一个全部守卫都是经过的守卫类：html

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模块下路由均容许canLoadapp

2.canActivate

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

3.canActivateChild

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

4.CanDeactivate

路由离开的时候进行触发的守卫，使用场景比较经典，一般是某些页面好比表单页面填写的内容须要保存，客户忽然跳转其它页面或者浏览器点击后退等改变地址的操做，能够在守卫中增长弹窗提示用户正在试图离开当前页面，数据还未保存 等提示。ui

场景模拟

登陆判断
前期准备：login组件；配置login路由
由于login是独立一个页面，因此app.component.html应该只会剩余一个路由导航this

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

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

<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种模式分析：code

// 非懒加载模式
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)
  },
]

浏览器截图：

clipboard.png
明明咱们的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)
      },
    ]
  }
];

clipboard.png
这样写，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;
  }

clipboard.png

路由离开（选定应用的组件是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);
      }
    });
  }

默认数据状态时未保存，能够选择不保存直接跳转也能够保存以后再跳转。

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程