搭建个人博客 ( YIDBlog )
上一章我们讲完了注册和登录功能,有人问我,登录完之后每次个人信息就没了,对此,我们就要用到session来储存我们登录之后的信息
1.我们需要在项目里面引用几个中间件:express-session,connect-mongo
打开终端,输入命令行:
npm install express-session --save
npm install connect-mongo --save
2.安装成功后,修改我们的app.js:
var session = require('express-session');
//创建mongo和session回话机制
var MongoStore = require('connect-mongo')(session);
// session 中间件
app.use(session({
name: simpleBlog,// 设置 cookie 中保存 session id 的字段名称
secret: simpleBlog,// 通过设置 secret 来计算 hash 值并放在 cookie 中,使产生的 signedCookie 防篡改
cookie: {maxAge: 6000000},// 过期时间,过期后 cookie 中的 session id 自动删除
store:new MongoStore({url:'mongodb://localhost/simpleBlog'}),//将session储存到mongodb中
resave: false,
saveUninitialized: true
}));
3. 修改index.js:
app.post('/login',checkNoLogin,function (req, res) {
var password = req.body.password;
//检查用户是否存在
User.findOne({'username':req.body.username},function(err,user){
if(err){
console.log('error','登录出错');
req.flash('error','登录出错');
return res.redirect('/');
}
//用户不存在
if(!user){
console.log('error','用户不存在');
req.flash('error','用户不存在');
return res.redirect('/login');
}
//判断密码是否一致
if(user.username != password){
console.log('error','密码错误');
req.flash('error','密码错误');
return res.redirect('/');
}
//用户名密码都匹配后,将用户信息存入 session
req.session.user = user;
console.log(user.username);
req.flash('success','登录成功');
res.redirect('/');
});
});
这里登录之后,Session存储用户信息并且跳转到首页。
4.修改header.ejs:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><%= title %> - Blog</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">YIDBlog</a>
</div>
<a class="navbar-brand" href="/">首页</a>
<ul class="nav navbar-nav navbar-right">
<% if(user){ %>
<li><a title="发表文章" href="/post">发表文章</a></li>
<li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span>登出</a></li>
<%}else{%>
<li><a href="/reg"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
<%}%>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<% if(success) { %>
<%= success%>
<% } else { %>
<%= error %>
<% } %>
<h3><%= title %></h3>
<div class="userArea">
<% if(user) {%>
<span>用户:<%= user.username %></span>
<% } else { %>
<span>用户:游客</span>
<% } %>
</div>
</div>
<hr />
<div class="col-sm-12">
user 就是用来判断用户是否已经登录
效果如图:
5.登出
登录之后,我们想退出账号,可以按登录按钮, 修改index.js:
//退出登录
app.get('/logout',checkLogin,function (req, res) {
req.session.user = null;
req.flash('success', '登出成功!');
res.redirect('/');//登出成功后跳转到主页
});