【前端】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>
相关推荐
行者-全栈开发6 小时前
【前端/JS框架】CVE-2026-3854:GitHub Enterprise Server X-Stat注入XSS漏洞深度剖析与紧急修复指南
前端·javascript·github
计算机魔术师7 小时前
AMD砸82亿买下李飞飞,这次不卖芯片卖什么?
前端
hzxpaipai8 小时前
杭州企业官网怎么建设?从策划到上线的5步建站方法
运维·服务器·前端·网络
怕浪猫8 小时前
2026年金九银十,我面了22个前端
前端·javascript·面试
IT_陈寒8 小时前
Vue 这个响应式陷阱,我的头发都掉没了
前端·人工智能·后端
前端的日常8 小时前
一个人+AI做情侣食谱小程序,30天纯赚
前端·javascript·后端
qq_316837759 小时前
阿里云百炼 fun-asr-realtime uniapp vue3 调用
javascript·vue.js·uni-app
庄园特聘拆椅狂魔9 小时前
Java 后端转全栈的第一课:从前端项目搭建到技术选
java·开发语言·前端
triumph_passion9 小时前
前端路由策略:Memory、Hash 与 History
前端
李剑一9 小时前
AntDesign老版本没有月份和年份区间选择组件?我封装了一个完美版,附源码!
前端·vue.js