app.module.ts update

  1. const routes: Routes = [
  2. {path: '', redirectTo: '/home', pathMatch: 'full'},
  3. {path: 'home', component: HomeComponent},
  4. {path: 'login', component: LoginComponent},
  5. {path: '**', component: Code404Component}
  6. ];

nav-bar.compoonent.html update

  1. <ul class="nav navbar-nav navbar-right" *ngIf="!isLogin()">
  2. <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
  3. <li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  4. </ul>
  5. <ul class="nav navbar-nav navbar-right" *ngIf="isLogin()">
  6. <li><a href="#"><span class="glyphicon glyphicon-user"></span> {{username}}</a></li>
  7. <li><a (click)="loginOut()"><span class="glyphicon glyphicon-log-out"></span> LoginOut</a></li>
  8. </ul>

login.component.html add

  1. <div class="container">
  2. <div class="main-box col-md-6 col-md-offset-3">
  3.  
  4. <div class="panel panel-info">
  5. <div class="panel-heading">
  6. <div class="panel-title">Login</div>
  7. </div>
  8.  
  9. <div style="padding:30px" class="panel-body">
  10.  
  11. <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
  12.  
  13. <form class="form-horizontal" role="form" #loginForm="ngForm"
  14. (ngSubmit)="loginForm.form.valid && login()">
  15.  
  16. <label style="padding-bottom:10px" class="control-label">UserName</label>
  17. <div style="margin-bottom: 15px" class="input-group"
  18. [ngClass]="{'has-error': loginForm.submitted && !username.valid }">
  19. <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  20. <input type="text" class="form-control" name="username" placeholder="username or email"
  21. [(ngModel)]="model.username" #username="ngModel" required>
  22. <div *ngIf="loginForm.submitted && !username.valid" class="help-block">
  23. Username is required
  24. </div>
  25. </div>
  26.  
  27. <label style="padding-bottom:10px" class="control-label">Password</label>
  28. <div style="margin-bottom: 25px" class="input-group"
  29. [ngClass]="{'has-error': loginForm.submitted && !username.valid }">
  30. <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
  31. <input type="password" class="form-control" name="password" placeholder="password"
  32. [(ngModel)]="model.password" #password="ngModel" required>
  33. <div *ngIf="loginForm.submitted && !password.valid" class="help-block">
  34. password is required
  35. </div>
  36. </div>
  37. <div class="form-group">
  38. <button [disabled]="loading" class="btn btn-primary">Login</button>
  39. <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
  40. />
  41. </div>
  42. </form>
  43. </div>
  44. </div>
  45.  
  46. </div>
  47. </div>

login.component.ts add

  1. import {Component, OnInit} from '@angular/core';
  2. import {ActivatedRoute, Router} from '@angular/router';
  3. import {AuthenticationService} from '../authority-guard/authentication.service';
  4.  
  5. @Component({
  6. selector: 'app-login',
  7. templateUrl: './login.component.html',
  8. styleUrls: ['./login.component.css']
  9. })
  10. export class LoginComponent implements OnInit {
  11.  
  12. model: any = {};
  13. loading = false;
  14. returnUrl: string;
  15.  
  16. constructor(private activeRoute: ActivatedRoute,
  17. private router: Router,
  18. private authenticationService: AuthenticationService) {
  19. }
  20.  
  21. ngOnInit() {
  22. this.authenticationService.loginOut();
  23. if (this.authenticationService.login(this.model.username, this.model.password)) {
  24. this.router.navigate([this.returnUrl]);
  25. } else {
  26. this.loading = false;
  27. }
  28. }
  29.  
  30. login() {
  31. const isLogin = this.authenticationService.login(this.model.username, this.model.password);
  32. if (isLogin) {
  33. this.router.navigate(['/home']);
  34. }
  35. }
  36.  
  37. }

login-auth.service.ts add

  1. import {Injectable} from '@angular/core';
  2. import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
  3. import {AuthenticationService} from '../authority-guard/authentication.service';
  4.  
  5. @Injectable()
  6. export class LoginAuthService implements CanActivate {
  7. constructor(private router: Router,
  8. private authenticationService: AuthenticationService) {
  9. }
  10.  
  11. canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  12. // 未登陆,重定向URL到登录页面,包含返回URL参数,然后返回False
  13. this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
  14. return !!this.authenticationService.isLogin();
  15. }
  16. }

authentication.service.ts add

  1. import {Injectable} from '@angular/core';
  2.  
  3. @Injectable()
  4. export class AuthenticationService {
  5.  
  6. static isLogin() {
  7. return localStorage.getItem('currentUser');
  8. }
  9.  
  10. static login(username: string, password: string) {
  11. if (username === 'admin' && password === 'admin') {
  12. localStorage.setItem('currentUser', username);
  13. return true;
  14. }
  15. return false;
  16. }
  17.  
  18. static loginOut() {
  19. localStorage.removeItem('currentUser');
  20. }
  21. }

@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. Django of python 中文文档 及debug tool

    http://python.usyiyi.cn/django/index.html http://www.ziqiangxuetang.com/django/django-views-urls.htm ...

  2. 20170413 F110学习

                  F110 学习: Tcode: F110  自动付款业务, FBZP   维护收付程序设置 FBL1N   供应商行项目 XK03   显示供应商(银行信息维护) F110 ...

  3. 《UNI|X环境高级编程》 源代码配置

    代码下载地址:http://www.apuebook.com/ 下的第二版,里面有个readme文件: root@iZ23onhpqvwZ:~/ms/linux/apue/apue.2e# cat R ...

  4. python数据之间的转换和关系

    首先数据类型在我看来分为两类: 容器类:能存储数据,例如:元祖.列表.集合.字符串. 原子类:单纯保存数值,例如:整数.浮点数.复数. 容器类与容器类之间,一般都可以进行两两之间的转化. 原子类与原子 ...

  5. PHP下使用Redis消息队列发布微博

    phpRedisAdmin :github地址  图形化管理界面 git clone [url]https://github.com/ErikDubbelboer/phpRedisAdmin.git[ ...

  6. 调用AJAX返回JSON、XML数据类型

    1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  7. $《第一行代码:Android》读书笔记——第5章 Broadcast

    (一)广播机制简介 1.Android广播的分类: 如图所示: 2.发送广播:使用Intent:接收广播:Broadcast Receiver. (二)接收系统广播 1.动态注册监听网络变化 示例程序 ...

  8. LeetCode: Keyboard Row

    代码长了些,但还是比较简单的 public class Solution { public String[] findWords(String[] words) { List<String> ...

  9. PCIE phy和控制器

    转:https://wenku.baidu.com/view/a13bc1c20722192e4436f617.html 文章中的第11页开始有划分phy和控制器部分....

  10. 记录python面试题

    闲来无事,记录一下曾经以及深刻的面试题 记录一下我记忆比较深的面试题,以后若用到python相关还能细细把玩 搜狐面试题: 一.写一个缓存优化策略 解答:这个题主要考察对lru_cache的理解,所以 ...