序言
在不设置路由守卫的时候，任何用户能在任何时候导航到任何地方的，但是在某些场景为了安全，我们需要登录的用户才能导航到对应的页面。这时候我们需要给组件添加路由守卫。
步骤
1、分层路由介绍
CanActivateChild：处理导航到某子路由的情况
CanDeactivate：处理从当前路由离开的情况
Resolve：在路由激活之前获得路由数据
CanLoad：处理异步导航到某特性模块的情况
2、声明
这里的路由守卫使用与Angular-cli使用命令行ng new my-app 安装的Angular4的项目
3、路由守卫需要添加的代码（所有的文件路径与我下面的代码路径一致）
src/app/auth.service.ts
import { Injectable } from ‘@angular/core‘;
import { Observable } from ‘rxjs/Observable‘;
import ‘rxjs/add/observable/of‘;
import ‘rxjs/add/operator/do‘;
import ‘rxjs/add/operator/delay‘;
@Injectable()
export class AuthService {
isLoggedIn = false;
// store the URL so we can redirect after logging in
redirectUrl: string;
login(): Observable<boolean> {
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
}
logout(): void {
this.isLoggedIn = false;
window.location.href="#/login";
}
}
src/app/auth-guard.service.ts
import { Injectable } from ‘@angular/core‘;
import {
CanActivate, Router,
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild,
NavigationExtras,
CanLoad, Route
} from ‘@angular/router‘;
import { AuthService } from ‘./auth.service‘;
@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.checkLogin(url);
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canActivate(route, state);
}
canLoad(route: Route): boolean {
let url = `/${route.path}`;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.authService.isLoggedIn) { return true; }
// Store the attempted URL for redirecting
this.authService.redirectUrl = url;
// Create a dummy session id
// let sessionId = 123456789;
// Set our navigation extras object
// that contains our global query params and fragment
let navigationExtras: NavigationExtras = {
// queryParams: { ‘session_id‘: sessionId },
// fragment: ‘anchor‘
};
// Navigate to the login page with extras
this.router.navigate([‘/login‘], navigationExtras);
return false;
}
}
src/app/can-deactivate-guard.service.ts
import { Injectable } from ‘@angular/core‘;
import { CanDeactivate } from ‘@angular/router‘;
import { Observable } from ‘rxjs/Observable‘;
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
src/app/selective-preloading-strategy.ts
import ‘rxjs/add/observable/of‘; import { Injectable } from ‘@angular/core‘; import { PreloadingStrategy, Route } from ‘@angular/router‘; import { Observable } from ‘rxjs/Observable‘; @Injectable() export class SelectivePreloadingStrategy implements PreloadingStrategy { preloadedModules: string[] = []; preload(route: Route, load: () => Observable<any>): Observable<any> { if (route.data && route.data[‘preload‘]) { // add the route path to the preloaded module array this.preloadedModules.push(route.path); // log the route path to the console console.log(‘Preloaded: ‘ + route.path); return load(); } else { return Observable.of(null); } } }
在src/app/views/pages 下面加入四个登录有关的文件
src/app/app.module.ts中需要加入如下代码
import { LoginRoutingModule } from ‘./views/pages/login-routing.module‘;
import { LoginComponent } from ‘./views/pages/login.component‘;
declarations: [
LoginComponent,
],
imports: [
LoginRoutingModule,
],
4、项目地址：https://github.com/0513Cassie/guard-git
使用说明
（1）下载
（2）进入文件目录 执行命令行npm install 或者 cnpm install
（3）http://localhost:4200/#/login 打开登录页面（用户名：Cassie，密码：888888）