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');
}
}

@angular/cli项目构建--路由2的更多相关文章

  1. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  2. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  3. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  4. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  5. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  6. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  7. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  8. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  9. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. springboot 2.0 配置 logback

    springboot2.0默认已经引入日志jar依赖,所以直接配置日志信息就可以了. 在application.properties中加入: logging.config=classpath:logb ...

  2. corethink功能模块探索开发(一)根据已有模块推测目录结构

    corethink是opencmf的一个开源版本,如果自己要进行二次开发,开发模块等,需要在官方开一个中级会员(50大洋吧),官网的一个“一键生成demo”就能给你最基础的目录结构,从而可以在此基础上 ...

  3. loadrunder之脚本篇——接口传参为本地文件

    导言 前几天需要对公司一个专门很重要的接口进行压测,这个还不是重点,重点是传参为本地的图片!刚刚开始通过web_custom_request()函数来解决,可是脚本并不能通过!后面又百度不到答案,通过 ...

  4. iOS Xcode 8 快捷键 (注释 失效 处理)

    在升级后,好用的VVDocumment 插件不能用了.(但是苹果这次内置了好多好用的插件,也有自己的注释功能了 AddDocumentation) 上网上有查到 传播很广泛的一条信息 "这个 ...

  5. UI控件之UIImageView

    UIImageView:图像视图,用于在应用程序中显示图片 UIImage:是将图片文件转换为程序中的图片对象 UIImageView是UIImage的载体 方法一:用此方法创建图片对象,会将图片ca ...

  6. windows通过ftp下载linux文件

    # windows 下载 linux的文件>> ftp <domain_or_ip>>> <input_username>>> <in ...

  7. Ubuntu中输入输出重定向及管道技术简述

    输出 1.标准输出 定义:程序在默认情况下输出结果的地方(stdout). 2.输出重定向 定义:用于把数据的输出转移到另一个地方去. 3.Ubuntu中例子 $ls > ~/ls_out  # ...

  8. VMWare中安装windowsXP遇到的问题

    XP系统安装 1.安装Windows和安装linux不一样,创建虚拟机完成后Linux自动根据硬盘进行系统安装,不需要提前分区.而windows必须进行提前分区,这个分区是在虚拟磁盘上完成的,就是你创 ...

  9. Mybatis一对多/多对多查询时只查出了一条数据

    问题描述: 如果三表(包括了关系表)级联查询,主表和明细表的主键都是id的话,明细表的多条数据只能查询出来第一条/最后一条数据. 三个表,权限表(Permission),权限组表(Permission ...

  10. Pro*C基础

    SQL变量的申明: EXEC SQL BEGIN DECLARE SECTION; 类型 变量名[长度] varchar2 serv_number[]; 其中可以定义C变量 EXEC SQL END ...