@angular/cli项目构建--路由2
app.module.ts update
const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'login', component: LoginComponent}, {path: '**', component: Code404Component} ];
nav-bar.compoonent.html update
<ul class="nav navbar-nav navbar-right" *ngIf="!isLogin()"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> <ul class="nav navbar-nav navbar-right" *ngIf="isLogin()"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> {{username}}</a></li> <li><a (click)="loginOut()"><span class="glyphicon glyphicon-log-out"></span> LoginOut</a></li> </ul>
login.component.html add
<div class="container"> <div class="main-box col-md-6 col-md-offset-3"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Login</div> </div> <div style="padding:30px" class="panel-body"> <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form class="form-horizontal" role="form" #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && login()"> <label style="padding-bottom:10px" class="control-label">UserName</label> <div style="margin-bottom: 15px" class="input-group" [ngClass]="{'has-error': loginForm.submitted && !username.valid }"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" name="username" placeholder="username or email" [(ngModel)]="model.username" #username="ngModel" required> <div *ngIf="loginForm.submitted && !username.valid" class="help-block"> Username is required </div> </div> <label style="padding-bottom:10px" class="control-label">Password</label> <div style="margin-bottom: 25px" class="input-group" [ngClass]="{'has-error': loginForm.submitted && !username.valid }"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="password" [(ngModel)]="model.password" #password="ngModel" required> <div *ngIf="loginForm.submitted && !password.valid" class="help-block"> password is required </div> </div> <div class="form-group"> <button [disabled]="loading" class="btn btn-primary">Login</button> <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> </div> </form> </div> </div> </div> </div>
login.component.ts add
import {Component, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {AuthenticationService} from '../authority-guard/authentication.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { model: any = {}; loading = false; returnUrl: string; constructor(private activeRoute: ActivatedRoute, private router: Router, private authenticationService: AuthenticationService) { } ngOnInit() { this.authenticationService.loginOut(); if (this.authenticationService.login(this.model.username, this.model.password)) { this.router.navigate([this.returnUrl]); } else { this.loading = false; } } login() { const isLogin = this.authenticationService.login(this.model.username, this.model.password); if (isLogin) { this.router.navigate(['/home']); } } }
login-auth.service.ts add
import {Injectable} from '@angular/core'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router'; import {AuthenticationService} from '../authority-guard/authentication.service'; @Injectable() export class LoginAuthService implements CanActivate { constructor(private router: Router, private authenticationService: AuthenticationService) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { // 未登陆,重定向URL到登录页面,包含返回URL参数,然后返回False this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}}); return !!this.authenticationService.isLogin(); } }
authentication.service.ts add
import {Injectable} from '@angular/core'; @Injectable() export class AuthenticationService { static isLogin() { return localStorage.getItem('currentUser'); } static login(username: string, password: string) { if (username === 'admin' && password === 'admin') { localStorage.setItem('currentUser', username); return true; } return false; } static loginOut() { localStorage.removeItem('currentUser'); } }