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) {// 未登录，跳转到loginthis.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]