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

标签包装内容。html部分的内容就这些了，我们再来看看控件类的内容。控制类先把代码放出来，然后慢慢分析。@Component({selector:'app-login',templateUrl:'./login.component.html',styleUrls:['./login.component.css']})exportclassLoginComponent{user:User=newUser(0,'','','');constructor(privateroute:Router,privatejumService:JumbotronServive,privateuserServ:UserService,privatetokenServ:AuthTokenService){jumService.setJumbotron(newJumbotron('登录',`请先使用您的用户名和密码登录`,``));}onSubmit(){this.userServ.getUser(this.user).subscribe((resp)=>{this.tokenServ.setToken(resp.body['token']);this.route.navigate(['/生日']);alert('登录成功！');},(err)=>alert(this.userServ.handleError(err)),()=>console.log('Postobservable现已完成。'))}}控件类主要完成以下功能：首先初始化User类的一个对象，实现ngModel到控件的双向绑定。保证当html控件的值发生变化时，绑定的User类的属性同步变化。构造函数中声明了Router对象、JumbotronServive对象、UserService对象和AuthTokenService对象。并在构造函数中使用JumbotronServive的setJumbotron方法更新网页的标题。（关于JumbotronServive的setJumbotron方法的具体内容可以参考上一篇文章。）onSubmit()函数在提交表单时被触发。在这个函数中，UserService的getUser()函数将用户名和密码发送给服务器。如果服务端验证成功，会发回jwt认证信息的token字符串，包括userid。在onSubmit()函数中调用AuthTokenService的setToken()函数，将此字符串存入本地存储，用于导航到下一页（生日页）时验证用户信息。然后导航到下一页并提示用户成功登录。如果发生错误，则会指示错误原因。这是用户登录的主要内容。在输入密码的时候还有一个小技巧，因为标签的type=password将输入的内容显示为“.”，很容易输入错误。我在这个控件上放了一个可切换的图片，让用户选择是否查看明文。实现方法主要是改变控件的attr属性。需要具体实现方法的朋友可以给我留言，我会在回复中告诉你。