1. 定义接口名称 /domain/login-guard.ts

export interface LoginGuard {data: any;msg: string;status: boolean;
}

2. 定义actions  /ngrx/actions/login-guard.action.ts

import { Action } from '@ngrx/store';
import {LoginGuard} from '../../domain/login-guard';/*** For each action type in an action group, make a simple* enum object for all of this group's action types.*/
export enum ActionTypes {GUARD = '[GUARD]'
};/*** Every action is comprised of at least a type and an optional* payload. Expressing actions as classes enables powerful* type checking in reducer functions.*/
export class GuardSuccess implements Action {readonly type = ActionTypes.GUARD;constructor(public payload: LoginGuard) { }
}/*** Export a type alias of all actions in this action group* so that reducers can easily compose action types*/
export type Actions= GuardSuccess;

3. 定义reducers  /ngrx/actions/login-guard.reducer.ts

import * as fromLogin from '../actions/login-guard.action';
import {LoginGuard} from '../../domain/login-guard';export interface State {guard: LoginGuard;
}export const initialState: State = {guard: {data: '',msg: '',status: true}
};export function reducer(state = initialState, action: fromLogin.Actions): State {switch (action.type) {case fromLogin.ActionTypes.GUARD: {return {...state, guard: action.payload};}default: {return state;}}
}

4. login.service.ts

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, NavigationEnd, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import 'rxjs';
import {HttpClient} from '@angular/common/http';
import * as fromReducer from '../ngrx/reducers/index';
import {Store} from "@ngrx/store";
import {GuardSuccess} from '../ngrx/actions/login-guard.action';export class LoginService {constructor(private router: Router, private http: HttpClient, private store$: Store<fromReducer.State>) {}// canActivate： 控制是否允许进入路由。
  canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {return this.activate();}// 在登陆的时候会把登陆信息存到浏览器localStorage，退出登陆时remove掉，如果是直接打开地址而没有登陆的话，会跳到登陆界面，judgeuser是请求用户信息接口，setUserInfo()把请求到的信息存到浏览器activate(): Observable<boolean> {const url = `${environment.path}/judgeUser`;const params = JSON.parse(localStorage.getItem('LOGININFO'));const param = {emNumber:params.emNumber,emPhone:params.emPhone}return this.http.post(url, param).map((guard: LoginGuard) => {const guard$ = guard;if (!guard$.status) {this.router.navigate(['/']);}setUserInfo(guard$);this.store$.dispatch(new GuardSuccess(guard$));return guard$.status;});}}

5. service注入

import {LoginService} from './service/login.service';
@NgModule({declarations: [AppComponent,DemoComponent,// HtmlPipe
  ],imports: [BrowserAnimationsModule,AppRoutingModule,ViewModule,ShareModule,AppStoreModule,HttpClientModule,DirectivesModule,],providers: [LayerService, InterfaceService, LoginService, {provide: LocationStrategy,useClass: HashLocationStrategy}],bootstrap: [AppComponent]
})
export class AppModule { }