路由跳转之后 部分内容没加载_Angular 之路由守卫

茫茫人海中与你相遇

相信未来的你不会很差

作者：何弃疗

来源：https://segmentfault.com/a/1190000020144286

路由守卫

守卫，顾名思义，必须满足一定的条件得到许可方可通行，否则拒绝访问或者重定向。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: [AuthGuar