@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');
}
}
@angular/cli项目构建--路由2的更多相关文章
- @angular/cli项目构建--路由3
路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--httpClient
app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
随机推荐
- 20170411 debug窗口执行文件
[FUNCTION] Command=/H Title=Debugger Type=SystemCommand
- 3.6.使用STC89C52控制MC20解析GPS的经纬度数据上传到指定服务器
需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...
- GPS USB驱动串口被占用
1.一般是装了错误的驱动,显示如下 2.实际装好应该是显示的 3.驱动选择,先卸载了上面的virtual驱动,安装下面箭头指向的驱动 这里的卸载很重要,先点设备管理器的--查看--显示隐藏设备, 然后 ...
- 剑指offer 面试26题
面试26题: 题目:树的子结构 题:输入两棵二叉树A和B,判断B是不是A的子结构. 解题思路:递归,注意空指针的情况. 解题代码: # -*- coding:utf-8 -*- # class Tre ...
- MVC4 中使用 Area 和 注意的地方
在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 (Area) 输入 Admin 添加成功后 Area包含:创建一个空 ...
- $Java HttpClient库的使用
(一)简介 HttpClient是Apache的一个开源库,相比于JDK自带的URLConnection等,使用起来更灵活方便. 使用方法可以大致分为如下八步曲: 1.创建一个HttpClient对象 ...
- linux ip别名和辅助ip地址
转:https://blog.csdn.net/xiewen99/article/details/54729112?utm_source=itdadao&utm_medium=referral ...
- python中编写带参数decorator
考察上一节的 @log 装饰器: def log(f): def fn(x): print 'call ' + f.__name__ + '()...' return f(x) return fn 发 ...
- mini2440移植uboot 2014.04(七)
上一篇博文:<mini2440移植uboot 2014.04(六)> 代码已经上传到github上: https://github.com/qiaoyuguo/u-boot-2014.04 ...
- IEnumerable的一些基本方法 补充
接上一篇,我们发现两表连接方式默认为内连接,而我们在SQL中常用到的左连接没有封装方法.换句话说,微软放弃两表左连或右连的这种做法(只有在2个表都存在值时,这样的连接才有意义). 如果要实现表的左连接 ...