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

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()函数，将这个字符串存储到本地存储，用于导航到下一个页面(生日页面)时验证用户信息。接下来导航到下一个页面，并提示用户登录成功。如果发生错误，提示错误原因。

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