【前端】NodeJS:记账本案例优化(会话控制)——登录、注册

文章目录

  • [1 checkLoginMiddleware.js](#1 checkLoginMiddleware.js)
  • [2 auth.js](#2 auth.js)
  • [3 app.js](#3 app.js)
  • [4 设置公益404:404.ejs](#4 设置公益404:404.ejs)

1 checkLoginMiddleware.js

javascript 复制代码
//检测登录的中间件
module.exports = (req, res, next) => {
  	//判断
  	if(!req.session.username){
    	return res.redirect('/login');
  	}
  	next();
}

2 auth.js

javascript 复制代码
var express = require('express');
var router = express.Router();
//导入 用户的模型
const UserModel = require('../../models/UserModel');
const md5 = require('md5');
//注册
router.get('/reg', (req, res) => {
  	//响应 HTML 内容
  	res.render('auth/reg');
});

//注册用户
router.post('/reg', (req, res) => {
  	//做表单验证
  	//获取请求体的数据
  	UserModel.create({...req.body, password: md5(req.body.password)}, (err, data) => {
    	if(err){
	      res.status(500).send('注册失败, 请稍后再试~~');
	      return
    	}
    	res.render('success', {msg: '注册成功', url: '/login'});
  	})  
});

//登录页面
router.get('/login', (req, res) => {
  	//响应 HTML 内容
  	res.render('auth/login');
});

//登录操作
router.post('/login', (req, res) => {
  	//获取用户名和密码
  	let {username, password} = req.body;
  	//查询数据库
  	UserModel.findOne({username: username, password: md5(password)}, (err, data) => {
    	//判断
    	if(err){
      		res.status(500).send('登录, 请稍后再试~~');
      		return
    	}
    	//判断 data
    	if(!data){
      		return res.send('账号或密码错误~~');
    	}
    	//写入session
    	req.session.username = data.username;
    	req.session._id = data._id;

    	//登录成功响应
    	res.render('success', {msg: '登录成功', url: '/account'});
  	})
});

//退出登录
router.post('/logout', (req, res) => {
  	//销毁 session
  	req.session.destroy(() => {
    	res.render('success', {msg: '退出成功', url: '/login'});
  	})
});

module.exports = router;

3 app.js

javascript 复制代码
const authRouter = require('./routes/web/auth');
app.use('/', authRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  	//响应 404 
  	res.render('404');
});

4 设置公益404:404.ejs

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404</title>
</head>
<body>
  <script src="//volunteer.cdn-go.cn/404/latest/404.js"></script>
</body>
</html>
相关推荐
甜兒.20 分钟前
鸿蒙小技巧
前端·华为·typescript·harmonyos
她似晚风般温柔7893 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能(最新附源码保姆级)
开发语言·javascript·uni-app
Jiaberrr4 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy4 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白4 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、4 小时前
Web Worker 简单使用
前端
web_learning_3214 小时前
信息收集常用指令
前端·搜索引擎
Ylucius4 小时前
动态语言? 静态语言? ------区别何在?java,js,c,c++,python分给是静态or动态语言?
java·c语言·javascript·c++·python·学习
tabzzz4 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百5 小时前
Vuex详解
前端·javascript·vue.js