专栏首页coding for love在线商城项目17-登录态保持

在线商城项目17-登录态保持

简介

前面我们实现了登入登出,一切看上去是没有什么问题,但是如果我们试着在登录情况下刷新一下页面。

头部显示变成了未登录的情况,如果每次刷新或者进入新的页面用户都需要重新登录,明显是不友好的,我们需要在用户登录以后保持登录态一段时间。可是,http本身又是无状态无连接的,此时我们需要借助cookie和session。关于这两者的详细知识我今后会开单章说明,不明白的同学可以先网上搜集一些资料看看。

本节主要有如下工作:

  1. 保持登录态
  2. 登出逻辑实现

1. 保持登录态

step1 在server端下载express-session包

npm install express-session --save

step2 在server端引入并使用express-session 修改app.js文件如下:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var goodsRouter = require('./routes/goods');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
// session需要在定义路由前使用
app.use(session({
    secret: 'six-tao',
    name: 'ST-TOKEN',
    cookie: {maxAge: 5 * 60 * 1000},
    resave: true,
    saveUninitialized: false
}))
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/goods', goodsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

step3 修改users.js逻辑 在login接口中,增加登陆成功后将doc保存到req.session.user的逻辑,增加登录状态判断逻辑。如下:

var express = require('express');
var router = express.Router();
var User = require('../models/user');

/* post users info. */
router.post('/login', function (req, res, next) {
    console.log(req.body);
    let param = {
        userName: req.body.userName,
        userPwd: req.body.userPwd
    };
    if (req.session.user) {
        res.json({
            code: '101',
            msg: '您已登录'
        });
        return;
    }
    User.findOne(param, function (err, doc) {
        if (err) {
            res.json({
                code: '900',
                msg: err.message || '服务器错误'
            })
        } else {
            if (doc) {
                req.session.user = doc
                res.json({
                    code: '000',
                    msg: '',
                    result: {
                        userName: doc.userName
                    }
                });
            } else {
                res.json({
                    code: '102',
                    msg: '用户名或密码错误'
                });
            }
        }
    });
});

router.get('/checkLogin', function (req, res, next) {
    console.log(req.session.user)
    if (req.session.user) {
        res.json({
            code: '000',
            msg: '',
            result: req.session.user
        });
    } else {
        res.json({
            code: '102',
            msg: '未登录',
        });
    }
})

module.exports = router;

step4 修改前端逻辑 在main.js中增加登录状态判断逻辑:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import axios from 'axios'
import VueLazyLoad from 'vue-lazyload'

import './assets/css/base.css'
import './assets/css/login.css'
import './assets/css/product.css'

Vue.config.productionTip = false

Vue.use(VueLazyLoad, {
  loading: '../static/loading/loading-bars.svg',
  error: '../static/ok-2.png'
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  created () {
    this.checkLogin()
  },
  methods: {
    checkLogin () {
      axios.get('/api/users/checkLogin').then(res => {
        let data = (res && res.data) || {}
        if (data.code === '000') {
          let result = data.result || {}
          this.$store.commit('LOG_IN', {userName: result.userName})
        }
      })
    }
  }
})

我们检测一下结果: 跳登录页,输入错误的账号密码:

输入正确的账号密码:

登录状态下刷新:

2. 登出逻辑实现

之前我们把登出逻辑放在前端。我们看一下:

刷新以后会出现问题。我们把登出的前后端逻辑补齐。

step1 后端逻辑 在users.js增加如下代码:

router.post('/logout', function (req, res, next) {
    req.session.destroy();
    res.json({
        code: '000',
        msg: '登出成功'
    });
});

step2 前端逻辑 修改PageHead.vue的logout方法如下

    logout () {
      axios.post('/api/users/logout').then(res => {
        let data = (res && res.data) || {}
        if (data.code === '000') {
          this.$store.commit('LOG_OUT')
        }
      })
    }

我们重新运行项目,并登陆以后:

six-tao-1706.gif

总结

到这里,我们的登录逻辑就算基本完成了。当然,真实的项目中,逻辑不止这么简单。比如我们这里的密码使用明文存储,是非常危险的,密码应该加密加盐处理。另外,我们重启服务器的时候session失效了,可以将session放在redis或者mongodb中进行存储。等等。 我们提交一下代码:

  1. six-tao
git status
git diff
git commit -am 'add checkLogin and logout'
git push
  1. six-tao-server
git status
git diff
git commit -am 'add session, checkLogin and logout'
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在线商城项目10-基于mongoose实现商品列表查询

    step1 先建goods集合对应的model 在根目录下新建一个目录models存放所有的model,新建good.js:

    love丁酥酥
  • CSS入门3-认识html之元素

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 在线商城项目12-商品列表页价格筛选实现

    之前我们约定前端传startPrice和endPrice来获取价格区间。我们设定如下规则:

    love丁酥酥
  • 请求与上传文件,Session简介,Restful API,Nodemon

    POST请求借助body-parser模板引擎以及req.body()函数得到参数。

    达达前端
  • 再谈session 和 cookie的差异

    用户2141593
  • 分布式基础__session 和 cookie的差异

    HTTP协议是一种无状态的 通信协议 。那么这就以为着 客户端按道理是需要每次请求之前都要和服务器做连接的。 但是每次都进行这种连接,会非常耗时,并且这些重复...

    矿泉水
  • flask源码阅读笔记(2)-session相关

    基于代码可看出,flask的session是基于cookie实现的,这样可以实现不同请求间存储特定用户的信息,实现用户状态的保持。

    皮皮熊
  • cookie 和 session-Nodejs

    本文转载自:https://github.com/alsotang/node-lessons/tree/master/lesson16

    ccf19881030
  • Flask入门

    本文参考博客:https://blog.csdn.net/xiaoyuan511?t=1

    py3study
  • vue前后端分离项目做权限控制、自动登陆、h5 history模式及404页面

    本文来谈谈前后端分离的项目如何做权限控制和自动登陆,如何应用history模式使网址看起来和传统无差,以及设置404页面,以vue为例。

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券