Angular6-路由守卫

import { Injectable } from '@angular/core';
import {
  CanActivate,
  CanDeactivate,
  CanLoad,
  CanActivateChild,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
  Route,
  UrlSegment,
  UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';
import { SearchListComponent } from 'src/app/homepage/search-list/search-list.component';

@Injectable({
  providedIn: 'root',
})
// 决定是否可以激活路由，对于延迟加载的功能模块，此守卫可能不是最佳方式，因为此守卫将始终将模块加载到内存中，即使守卫返回 false 这意味着用户无权访问路线。
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  // 路由守卫
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    return this.checkLogin();
  }
  checkLogin(): boolean {
    // 判断本地有没有token
    const token = localStorage.getItem('area');
    // 如果token有值，表示登录成功，继续跳转，否则跳转到首页
    if (token) {
      return true;
    }
    this.router.navigate(['login']);
    window.alert('你还没有登录，请登录');
    return false;
  }
}
// 离开页面时
export class UnsaveGuard implements CanDeactivate<SearchListComponent> {
  //第一个参数 范型类型的组件
  //根据当前要保护组件 的状态 判断当前用户是否能够离开
  canDeactivate(component: SearchListComponent) {
    return window.confirm('没有找到想要的吗');
  }
}
// 决定模块是否可以延迟加载，控制是否可以加载路由。 这对于延迟加载的功能模块非常有用。 如果守卫返回 false，它们甚至不会加载。
export class CanLoads implements CanLoad {
  canLoad(
    route: Route,
    segments: UrlSegment[]
  ):| boolean| UrlTree| Observable<boolean | UrlTree>| Promise<boolean | UrlTree> {
    return true;
  }
}
// 进入子路由时
export class canActivateChildS implements CanActivateChild {
  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    return true
  }

}

homepage

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './homepage.component';
import {
  AuthGuard,
  UnsaveGuard,
  CanLoads,
} from 'src/common/routeActivate/auth.service';
import { SearchComponent } from '../components/search/search.component';
import { SearchItemComponent } from './search-item/search-item.component';
import { SearchListComponent } from './search-list/search-list.component';
import { TabSwitchComponent } from '../components/tab-switch/tab-switch.component';
import { PlayMusicComponent } from '../components/play-music/play-music.component';
import { SetUpPageComponent } from './set-up-page/set-up-page.component';
const routes: Routes = [
  {
    path: '',
    component: HomepageComponent,
    children: [
      {
        path: '/homepage-index',
        loadChildren: () => {
          return import('./homepage-index/homepage-index.module').then(
            (mod) => mod.HomepageIndexModule
          );
        },
      },
      {
        path: '/homepage-recommend',
        loadChildren: () => {
          return import('./homepage-recommend/homepage-recommend.module').then(
            (mod) => mod.HomepageRecommendModule
          );
        },
      },
      {
        path: '/homepage-ranking',
        loadChildren: () => {
          return import('./homepage-ranking/homepage-ranking.module').then(
            (mod) => mod.HomepageRankingModule
          );
        },
      },
    ],
    // canLoad: [CanLoads],
  },

  {
    path: 'search-item',
    component: SearchItemComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'search-list',
    component: SearchListComponent,
    canDeactivate: [UnsaveGuard],
  },
  {
    path: '',
    redirectTo: 'hompage/homepage-index',
    // canLoad: [CanLoads],
  },
];

@NgModule({
  declarations: [
    HomepageComponent,
    SearchComponent,
    TabSwitchComponent,
    SearchItemComponent,
    SearchListComponent,
    PlayMusicComponent,
    SetUpPageComponent,
  ],
  imports: [CommonModule, RouterModule.forChild(routes)],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [AuthGuard, UnsaveGuard],
})
export class HomepageModule {}