用户登录实践
0.概述
常规用户访问系统,会被拦截到登录页,登录后浏览器会保留cookie,在cookie的有效期内,用户再访问根路径,就会跳转到首页。
这里主要涉及以下几个部分:
- 1.访问根路径,尚无cookie,跳转到登录页
- 2.登录页的GET和POST处理
- 3.后端对身份进行验证,成功后允许访问首页
- 4.访问页面,对cookie校验,验证失败,返回 403 错误
- 5.退出登录,清除cookie
1.登录页
登录页采用用户名和密码的方式,密码经过对称加密传输
<body class="verify-body">
<div class="row" >
<div class="col-md-4 col-md-offset-4" >
<div class="panel panel-default">
<div class="panel-heading">
<span style="color: #30a5ff;">
用户登录
</span>
</div>
<div class="tab-content">
<div class="panel-body" >
<div class="form-group">
<div class="form-group">
<input class="form-control" id="name" type="text"
placeholder="用户名">
</div>
<div class="form-group">
<input class="form-control" id="password" type="password"
placeholder="密码">
</div>
<button class="btn btn-primary col-md-12">用户登录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
点击按钮,提交登录
$.ajax({
url: "./system/login",
type: "POST",
timeout: null,
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
name: username,
password: password,
}),
dataType: "json",
success: function (obj) {
window.location.replace(obj.url)
},
error: function (obj) {
}
})
app.post("/system/login", (function (req, res) {
}));
2.hbs页面渲染
模板和数据准备好,使用res.render(pagename, data)组装即可
3.其他