【前端】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>
相关推荐
万少3 小时前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen113 小时前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript
烛衔溟4 小时前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
铁皮饭盒5 小时前
成为AI全栈 - 第3课:路由 RESTful Elysia 状态码 设计规范
前端·后端·全栈
顾昂_5 小时前
Web 性能优化完全指南
前端·面试·性能优化
IT乐手5 小时前
Claude Code + Qwen 的配置方法
javascript·claude
前端程序媛-Tian5 小时前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技5 小时前
Ant Design Pro v6.0.0 发布
前端
T畅N6 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer6 小时前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端