@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( ...
随机推荐
- Django of python 中文文档 及debug tool
http://python.usyiyi.cn/django/index.html http://www.ziqiangxuetang.com/django/django-views-urls.htm ...
- 20170413 F110学习
F110 学习: Tcode: F110 自动付款业务, FBZP 维护收付程序设置 FBL1N 供应商行项目 XK03 显示供应商(银行信息维护) F110 ...
- 《UNI|X环境高级编程》 源代码配置
代码下载地址:http://www.apuebook.com/ 下的第二版,里面有个readme文件: root@iZ23onhpqvwZ:~/ms/linux/apue/apue.2e# cat R ...
- python数据之间的转换和关系
首先数据类型在我看来分为两类: 容器类:能存储数据,例如:元祖.列表.集合.字符串. 原子类:单纯保存数值,例如:整数.浮点数.复数. 容器类与容器类之间,一般都可以进行两两之间的转化. 原子类与原子 ...
- PHP下使用Redis消息队列发布微博
phpRedisAdmin :github地址 图形化管理界面 git clone [url]https://github.com/ErikDubbelboer/phpRedisAdmin.git[ ...
- 调用AJAX返回JSON、XML数据类型
1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- $《第一行代码:Android》读书笔记——第5章 Broadcast
(一)广播机制简介 1.Android广播的分类: 如图所示: 2.发送广播:使用Intent:接收广播:Broadcast Receiver. (二)接收系统广播 1.动态注册监听网络变化 示例程序 ...
- LeetCode: Keyboard Row
代码长了些,但还是比较简单的 public class Solution { public String[] findWords(String[] words) { List<String> ...
- PCIE phy和控制器
转:https://wenku.baidu.com/view/a13bc1c20722192e4436f617.html 文章中的第11页开始有划分phy和控制器部分....
- 记录python面试题
闲来无事,记录一下曾经以及深刻的面试题 记录一下我记忆比较深的面试题,以后若用到python相关还能细细把玩 搜狐面试题: 一.写一个缓存优化策略 解答:这个题主要考察对lru_cache的理解,所以 ...