在上一篇博客中，我为大家介绍了angular调用服务的原理，以及实现了用户登录功能的前端部分。在这期博客中，我们将继续实现用户登录的后端部分，以及介绍angular的路由事件。
十 用户登录功能的开发
2 后端部分
我们打开util/users/userutil.py文件，实现loginuser函数：
# util/users/userutil.py
def loginuser(username,password):
password = encryption(password)
user = session.query(User).filter(and_(User.username == username,User.password == password)).first()
result = 'Fail'
if type(user) is User:
user.lastlogintime = datetime.now()
result = insertdata(user)
return result
这个函数很简单，用之前我们实现的加密函数把传入的密码进行加密，然后配合用户名去数据库中查找用户，如果找到了，则更新user表的lastlogintime字段；如果没找到，则返回Fail。
再打开apps/user_app/user_app.py，实现Login的RequestHandler：
# apps/user_app/user_app.py
class Login(BaseHandler):
def post(self):
ret = self.request.body
req = json_decode(ret)
username = req['username']
password = req['password']
result = loginuser(username,password)
returnResult = {'result': result}
returnResult_str = json.dumps(returnResult)
self.write(returnResult_str)
Login只实现post方法，从前端读入用户名和密码后，传入loginuser函数中登录用户，并将结果返回给前端。
最后，在main.py中注册Login的路由：
def make_app():
routelist = [
# ...
(r"/login",Login),
]
return tornado.web.Application(routelist,cookie_secret='12f6352#527',autoreload=True,debug=True,template_path='D:\\LeaveManage\\server\\template')
这样，我们用户登录的后端部分就实现了。
3 angular的路由事件
让我们再次把目光回到前端部分。我们在这个系列的第三篇中实现了主页面组件mainlayout，当时我们在前端模板中定义了一个名为isLogin的变量，并将其初始化为False。现在，我们已经实现了用户登录功能，就可以利用这个变量来检查用户登录与否了。
我们打开mainlayout.component.ts，修改mainlayout的构造函数，以及编写checkLogin函数用于检查用户是否登录：
//mainlayout.component.ts
import { Router, NavigationEnd } from '@angular/router';
//...
constructor(private cookie:CookieService,private router:Router) {
this.isLogin = false;
this.currentUser = this.cookie.get('currentuser')
this.router.events.subscribe(event =>{
if (event instanceof NavigationEnd)
{
this.checkLogin();
}
})
}
checkLogin():void{
if (this.cookie.get('currentuser')){
this.isLogin = true;
}
else{
this.isLogin = false;
}
}
//...
与之前的构造函数相比，我们这次在构造函数里添加了一个CookieService的对象和一个Router对象。前者用于判断当前页面是否存在cookie，而后者则是用来触发各种路由事件的。
路由事件是指当访问路由的过程中所触发的事件。通过路由事件，我们可以指定当页面开始加载、结束加载等时刻的行为，或者干脆限制用户访问某个路由所指向的位置。在这里，我们使用路由事件来判断用户是否登录，一旦用户成功登录并重定向到主页时，我们需要实时获得用户已经登录的信息，并显示登录后的菜单项。
在构造函数中，我们首先会从名为currentuser的cookie中获得当前登录的用户名，接下来会监听NavigationEnd路由事件，这个路由事件的触发时机为页面完全加载完成后。我们在这个路由事件中会调用checkLogin函数，这个函数会根据是否存在currentuser这个cookie而改变isLogin的值。如果存在名为currentuser的cookie，则将isLogin设为true；反之设为false。
最后，在ngOnInit函数中同样调用checkLogin函数：
// mainlayout.component.ts
ngOnInit() {
this.checkLogin()
console.log(this.isLogin)
}
4 退出登录与事件绑定
既然我们已经实现了用户登录，那么自然也要实现退出登录。退出登录没有任何后端代码，因为我们只需把那个currentuser的cookie删除掉，并修改isLogin为false就可表示当前用户已经退出了。我们在mainlayout.component.ts中实现logoutUser函数，用于退出登录：
//mainlayout.component.ts
logoutUser()
{
console.log('Logout user')
this.cookie.delete('currentuser','/','localhost',true,"Lax")
this.isLogin = false
}
然后，回到mainlayout.component.html文件中，给菜单项中的退出添加一个绑定，将这个菜单项绑定到logoutUser函数上：
<!-- mainlayout.component.html-->
<nz-dropdown-menu #menu="nzDropdownMenu" >
<ul nz-menu nzSelectable>
<li nz-menu-item>书写故事</li>
<li nz-menu-item>个人信息</li>
<li nz-menu-item (click)="logoutUser()">退出</li>
</ul>
</nz-dropdown-menu>
这里使用angular的事件绑定语法来将click这个事件与logoutUser函数进行绑定，即当单击这个菜单项时，会触发logoutUser函数。通过事件绑定，我们可以对用户的操作进行响应，如按下键盘、鼠标移动等。angular提供的绑定语法如下：
click是事件名，onSave()是函数名。当click事件发生时，就会调用onSave函数。
这样，当我们点击退出菜单项时，就会调用logoutUser函数将cookie删除，并将isLogin设为false，从而实现用户退出的操作。
在这期博客中，我们实现了用户登录功能的后端部分，以及顺便实现了用户退出功能。目前，我们的博客已经有了一个最基本的用户系统。在下一篇博客中，我们将开始开发我们的核心部分——故事系统和评论系统，希望大家继续关注~