ng g g guards/auth

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { User } from 'oidc-client';
import { AuthService } from '../services/auth.service';@Injectable()
export class AuthGuard implements CanActivate {constructor(private router: Router,private authService: AuthService) { }canActivate(): Observable<boolean> {return this.authService.loginStatusChanged.map((user: User) => {if (user) {return true;}this.authService.login();return false;});}
}

import { AuthGuard } from './guards/auth.guard';const appRoutes: Routes = [{ path: '', component: DashboardComponent, canActivate: [AuthGuard] },{ path: 'login-callback', component: LoginCallbackComponent },{ path: 'register', component: RegisterComponent },{ path: 'add-client', component: AddClientComponent, canActivate: [AuthGuard] },{ path: 'client/:id', component: ClientDetailsComponent, canActivate: [AuthGuard] },{ path: 'edit-client/:id', component: EditClientComponent, canActivate: [AuthGuard] }
];providers: [ClientService,AuthService,AuthGuard],

ngOnInit() {this.authService.loginCallBack().subscribe((user: User) => {if (user) { window.location.href = '/';}});}

ng g s services/settings

ng g interface models/Settings

export interface Settings {disableBalanceOnAdd?: boolean;disableBalanceOnEdit?: boolean;
}

import { Injectable } from '@angular/core';
import { Settings } from '../models/Settings';@Injectable()
export class SettingsService {private _settings: Settings = {disableBalanceOnAdd: false,disableBalanceOnEdit: false};constructor() { }get settings() {return this._settings;}
}

import { SettingsService } from './services/settings.service';
providers: [ClientService,AuthService,SettingsService,AuthGuard]

import { SettingsService } from '../../services/settings.service';public disableBalanceOnAdd = false;constructor(public flashMessagesService: FlashMessagesService,public router: Router,public clientService: ClientService, public settingsService: SettingsService) { }ngOnInit() {this.disableBalanceOnAdd = this.settingsService.settings.disableBalanceOnAdd;}

  tryGetUser() {return Observable.fromPromise(this.manager.getUser());}

  canActivate(): Observable<boolean> {return this.authService.tryGetUser().map((user: User) => {if (user) {return true;}this.authService.login();return false;});}

import { SettingsService } from '../../services/settings.service';disableBalanceOnEdit = false;constructor(public clientService: ClientService,public router: Router,public route: ActivatedRoute,public flashMessagesService: FlashMessagesService, public settingsService: SettingsService) { }ngOnInit() {this.disableBalanceOnEdit = this.settingsService.settings.disableBalanceOnEdit;// 获取IDthis.id = this.route.snapshot.params['id'];// 获取Clientthis.clientService.getOne(+this.id).subscribe(client => {this.client = client;});}

import { Injectable } from '@angular/core';
import { Settings } from '../models/Settings';@Injectable()
export class SettingsService {private _settings: Settings = {disableBalanceOnAdd: true,disableBalanceOnEdit: false};constructor() {if (localStorage.getItem('settings')) {this._settings = JSON.parse(localStorage.getItem('settings'));}}get settings() {return this._settings;}set settings(value: Settings) {this._settings = value;localStorage.setItem('settings', JSON.stringify(this._settings));}
}

import { Component, OnInit } from '@angular/core';
import { SettingsService } from '../../services/settings.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Settings } from '../../models/Settings';@Component({selector: 'app-settings',templateUrl: './settings.component.html',styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {settings: Settings;constructor(private settingsService: SettingsService,private flashMessagesService: FlashMessagesService,private router: Router) { }ngOnInit() {this.settings = this.settingsService.settings;}onSubmit() {this.settingsService.settings = this.settings;this.flashMessagesService.show('Settings 保存了', { cssClass: 'alert-success', timeout: 4000 });}}

<div class="row"><div class="col-md-6"><a routerLink="/" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard</a></div><div class="col-md-6"></div>
</div><div class="card"><div class="card-header"><h3>编辑 Settings</h3></div><div class="card-body"><form (submit)="onSubmit()"><div class="form-group"><label for="disableBalanceOnAdd">Disable Blance on Add</label><input type="checkbox" id="disableBalanceOnAdd" name="disableBalanceOnAdd" [(ngModel)]="settings.disableBalanceOnAdd"></div><div class="form-group"><label for="disableBalanceOnEdit">Disable Blance on Edit</label><input type="checkbox" id="disableBalanceOnEdit" name="disableBalanceOnEdit" [(ngModel)]="settings.disableBalanceOnEdit"></div><input type="submit" class="btn btn-primary btn-block" value="Submit"></form></div>
</div>

const appRoutes: Routes = [{ path: '', component: DashboardComponent, canActivate: [AuthGuard] },{ path: 'login-callback', component: LoginCallbackComponent },{ path: 'add-client', component: AddClientComponent, canActivate: [AuthGuard] },{ path: 'client/:id', component: ClientDetailsComponent, canActivate: [AuthGuard] },{ path: 'edit-client/:id', component: EditClientComponent, canActivate: [AuthGuard] }, { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },{ path: '**', component: PageNotFoundComponent }
];

        <li *ngIf="isLoggedIn" class="nav-item"><a class="nav-link" href="#" routerLink="/settings">Settings </a></li>