Angular4.0 路由守卫

Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。

• canActivate： 控制是否允许进入路由。
• canActivateChild： 等同 canActivate，只不过针对是所有子路由。
• canDeactivate： 控制是否允许离开路由。
• canLoad： 控制是否允许延迟加载整个模块。

本次以准入路由canActivate为实例：

RouteguardServiceService.service.ts

import { Injectable } from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from "@angular/router";
import userModel from "../model/user-model";

/**
 * 准入路由守护
 */
@Injectable()
export class RouteguardServiceService implements CanActivate{

  constructor(
    private router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 返回值 true: 跳转到当前路由 false: 不跳转到当前路由
    // 当前路由名称
    var path = route.routeConfig.path;
    // nextRoute: 设置需要路由守卫的路由集合，首次护卫第一级主路由
    var nextRoute = ['main'];
    let isLogin = userModel.isLogin;// 是否登录

    console.log('siLogin='+isLogin);
    // 当前路由是nextRoute指定页时
    if(nextRoute.indexOf(path) >= 0){
      if (!isLogin) {
        // 未登录，跳转到login
        this.router.navigate(['user-login']);
        return false;
      }else{
        // 已登录，跳转到当前路由
        return true;
      }
    }

    // 当前路由是login时
    // if (path === 'user-login') {
    //   if (!isLogin) {
    //     // 未登录，跳转到当前路由
    //     return true;
    //   }else{
    //     // 已登录，跳转到home
    //     this.router.navigate(['index']);
    //     return false;
    //   }
    // }
  }

}

userModel.ts

let userModel = {
  isLogin: false,　// 判断是否登录
  accout: '',
  password: '',
};

export default userModel;

app.route.ts

export const appRoutes = [
  {
    path: 'main',
    loadChildren: './main/main.module#MainModule',
    canActivate: [RouteguardServiceService]
  },
  {
    path: 'user',
    loadChildren: './user/user.module#UserModule'
  }
  /*
   * （''）表示应用的默认路径，当URL为空时就会访问那里，因此它通常会作为起点。
   * */
  {
    path: '',
    redirectTo: '/user-login',
    pathMatch: 'full'
  },
  /*
  * 请保证顺序为最后一个路由，**路径是一个通配符。当所请求的URL不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。
  * 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。
  * */
  {
    path: '**',
    redirectTo: '/user-login',
  },
];

注意：直接运行会报错service是providers的

在app.moudle.ts中的providers:[]中需要添加service

providers: [
  HttpService,
  InterfaceService,
  SessionService,
  LocalStorage,
  StoreDataService,
  RouteguardServiceService,
  Constants,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true,
  },
],

.在@Component组件的元数据底部添加providers数组属性（调用需要在构造函数中申明）

  providers: [HeroService]