利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！
这一章主要讲利用angularJs控制用户登录。在前面的用户注册表单中使用了angular的响应式表单。为了对angular的知识学习的全面一点，在用户登录的表单中，使用了模板驱动型表单。

先从html代码开始

<div class="div-login">
  <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
    <div class="form-group">
      <label for="name">User name</label>
      <input type="text" class="form-control" id="name" name="name" placeholder="Enter user name" [(ngModel)]="user.name" required
        #name="ngModel">
      <div *ngIf="name.invalid && (name.dirty || name.touched)"   class="alert alert-danger">
          User name is required!
      </div>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <div class="input-group">
        <input class="form-control" id="password" name="passwrod" placeholder="Enter password" [(ngModel)]="user.password"
        required #password="ngModel">
      </div>
      <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
          Password is required!
      </div>
    </div>
    <div class="form-group form-btn">
      <button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button>
      <button type="button" class="btn btn-light" (click)="loginForm.reset()">Cancel</button>
    </div>
  </form>
</div>

在这个html文件的<form>标签中，(ngSubmit)="onSubmit()"和用户注册表单一样，用于处理表单的提交操作，为了实现在表单不合法时提交按钮的disabled为false，需要让按钮能够访问到表单，从而获取到表单的状态，所以，需要在<form>标签中定义了一个模板引用变量 #loginForm，并且把赋值为“ngForm”，同时在submit按钮标签中加入：[disabled]="!loginForm.form.valid"。
两个<input>标签分别输入用户名和密码，通过ngModel创建双向绑定到组件类的User对象的name和password属性，用于读取和写入输入控件的值。这里需要注意一点：当在表单中使用 [(ngModel)] 时，必须要定义 name 属性。
模板驱动表单的验证都在html代码中实现，需要完成以下几项任务：

• 首先要定义模板引用变量，并赋值为"ngModel"，注意观察<input>标签中的 #name="ngModel"和#password="ngModel"。
• 两个用户名和密码的验证规则比较简单，只需required，在两个<input>标签中加入此属性。
• 显示验证错误信息和注册表单差不多，当模板引用变量即两个输入框变为dirty(控件值变化了)和touched(控件值被访问过)状态时，如果控件值无效(invalid)，就显示<div>标签包裹的内容。

html部分的内容就这些了，下面我们看一下控件类的内容。

控件类

先把代码放出来，后面慢慢分析。

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  user: User = new User(0, '', '', '');
  constructor(
    private route: Router,
    private jumService: JumbotronServive,
    private userServ: UserService,
  private tokenServ: AuthTokenService) {
    jumService.setJumbotron(new Jumbotron('Login',
      `Please login with your user name and password first`,
      ``));
  }
  onSubmit() {
    this.userServ.getUser(this.user).subscribe(
      (resp) => {
        this.tokenServ.setToken(resp.body['token']);
        this.route.navigate(['/birthday']);
        alert('登录成功！');
      },
      (err)=>
      alert(this.userServ.handleError(err)),
      () => console.log('The Post observable is now completed. ')
    )
  }
}

控件类主要完成了如下功能：

• 首先初始化了一个User类的对象，用于ngModel双向绑定到控件。保证在html控件值变化时，绑定的User类的属性同步变化。
• 在构造函数中声明了一个Router对象、一个JumbotronServive对象和UserService对象、AuthTokenService对象。并在构造函数中用JumbotronServive的setJumbotron方法更新了网页的标题。(JumbotronServive的setJumbotron方法具体内容请看前面的文章。)
• onSubmit()函数在表单提交时被触发，在该函数中UserService的getUser()函数，getUser()函数向服务器发送了用户名和密码，如果服务器验证成功，会发送回jwt认证信息的token字符串，其中包括了userid。在onSubmit()函数中调用AuthTokenService的setToken()函数，将这个字符串存储到本地存储，用于导航到下一个页面(生日页面)时验证用户信息。接下来导航到下一个页面，并提示用户登录成功。如果发生错误，提示错误原因。

用户登录主要的内容就这些了。其中还有一个小技巧性的东西就是在输入密码的时候，因为<input>标签的type=password，显示的输入内容为“.”,很容易输错。我在这个控件上放了一个可以切换的图片，用于让用户选择是否查看明文。实现的方法主要是改变<input>控件的attr属性。如果需要具体实现方法的朋友，可以给我留言，我会在回复中告诉大家。