给登录用户建立会话,没有登录的用户,重定向到登录页面。
1. 检查express-session是否安装
E:\MyProject\nodejs\HelloNodejs>npm list |findstr "session"
+-- express-session@1.15.6
如没有安装,则安装
npm install express-session --save
2. 修改app.js文件
增加
var session = require('express-session');
在app.use(express.static(path.join(__dirname, 'public')));下方增加以下代码。上半部分设置session,下半部分设置拦截。
关于express的middleware,详细可参考http://expressjs.com/en/guide/using-middleware.html
关于express-session,详细可参考https://www.npmjs.com/package/express-session
var identityKey = 'skey';
app.use(session({
name: identityKey,
secret: 'HellojsjsolleH',
cookie:{
maxAge: 5*60*1000
}
}));
app.use(function (req, res, next) {
var url = req.originalUrl;
if(req.session.loginUser){
next();
}else if ( url == '/users/login' || url == '/users/loginAction' || url == '/users/new'){
next();
}else{
return res.redirect("/users/login");
}
});
3. 修改users.js文件,将用户登录、注册有关的功能放到这个文件实现。
isValidUser是一个辅助函数,内置3个用户。/login返回登录页面,/loginAction处理登录提交,区分ajax和传统提交两种情况,登录成功则设置会话,并通知浏览器重定向。
var express = require('express');
var router = express.Router();
function isValidUser(username, password) {
var users = {
'zhangsan': '123456',
'lisi': '12345678',
'wanger': 'waner'
};
return users[username] == password;
}
/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
router.get('/login', function (req, res, next) {
res.render('login', {
title: 'login'
});
});
router.get('/logout', function (req, res, next) {
req.session.destroy();
return res.redirect("/users/login");
});
router.post('/loginAction', function (req, res, next) {
var sess = req.session;
var OK = isValidUser(req.body.username, req.body.password);
if (OK) {
req.session.regenerate(function (err) {
if (req.headers['x-requested-with'] && req.headers['x-requested-with'].toLowerCase() == 'xmlhttprequest') {
if (err) { //ajax请求
return res.json({
retCode: 2,
retMsg: '登录失败'
});
}
req.session.loginUser = req.body.username;
return res.json({
retCode: 0,
retMsg: '/'
});
} else { //传统请求
if (err) { //ajax请求
return res.json({
retCode: 2,
retMsg: '登录失败'
});
}
req.session.loginUser = req.body.username;
return res.redirect("/");
}
});
} else {
res.json({
retCode: 1,
retMsg: '账号或密码错误'
});
}
});
module.exports = router;
2. 修改layout.html
在script部分增加个 consumerJS的block
<script>
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,
winHeight = window.innerHeight;
if(!(contentHeight > winHeight)){
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
var hh = $("#mainNav").height() + $("#breadNav").height() + $("#navFooter").height();
$("#divMain").height(winHeight - hh - 5);
}
{% block consumerJS %}{% endblock %}
footerPosition();
$(window).resize(footerPosition);
});
</script>
将登录的连接用变量表示,如没有登录则显示登录,以登录则显示为注销。
<ul class="nav navbar-nav navbar-right">
<li><a id="linkLogin" href="{{ loginOutLink }}">{{ loginOutName }}</a></li>
<li><a href="/users/new">注册</a></li>
</ul>
3. 修改login.html
在consumerJS的block增加以下内容
{% block consumerJS %}
$('#commit').click(function(evt){
evt.preventDefault();
$.ajax({
url: '/users/loginAction',
type: 'POST',
data: {
username: $('#username').val(),
password: $('#password').val()
},
success: function(data){
if(data.retCode === 0){
//redirect
window.location.href="/";
}else{
alert(data.retCode + " : " + data.retMsg);
}
}
});
});
{% endblock %}
用ajax方式提交登录数据,验证通过,则跳转,否则弹出告警框。