node+express+mongoDB搭建个人博客 (三)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/YIDBoy/article/details/54318202

搭建个人博客 ( 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('/');//登出成功后跳转到主页
 });

猜你喜欢

转载自blog.csdn.net/YIDBoy/article/details/54318202