[武汉|结业弟子]JS-周恒光|2017年06月12日的日报-技能树.IT修真院

发表于： 2017-06-12 23:23:09

1 1096

今天完成的事情：

1.在core中建立模块core.module.ts

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
]
})
export class CoreModule {
constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(
'CoreModule is already loaded. Import it in the AppMoudle only'
);
}
}
}

只在应用启动时导入它一次，而不会在其它地方导入它。在模块的构造函数中要求Angular把CoreModule注入自身，@SkipSelf装饰器意味着在当前注入器的所有祖先注入器中寻找CoreModule。在这个模块中只应用于AppComponent模板的一次性组件，通过根模块AppModule导入CoreModule来获取。

2.angular的路由守卫：

用CanActivate来处理导航到某路由的情况。

用CanActivateChild处理导航到子路由的情况。

用CanDeactivate来处理从当前路由离开的情况。

用Resolve在路由激活之前获取路由数据。

用CanLoad来处理异步导航到某特性模块的情况

在分层路由的每个级别上，都可以设置多个守卫。路由器会先按照从最深的子路由由下往上检查的顺序来检查CanDeactivate守护条件。然后它会按照从上到下的顺序检查CanActivate守卫。如果任何守卫返回false，其它尚未完成的守卫会被取消，这样整个导航就被取消。

再建立AuthGuardService，终端命令行中键入ng g s core/auth-guard（angular-cli对于Camel写法的文件名是采用-来分隔每个大写的词）。

import { Injectable, Inject } from '@angular/core';
import {
CanActivate,
Router,
ActivatedRouteSnapshot,
RouterStateSnapshot }    from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
//取得用户访问的URL
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
//如果用户已经登录就放行
if (localStorage.getItem('userId') !== null) { return true; }
//否则，存储要访问的URl到本地
localStorage.setItem('redirectUrl', url);
//然后导航到登陆页面
this.router.navigate(['/login']);
//返回false，取消导航
return false;
}
}