登录注册案例
例子使用的是express框架, 可以先express myapp 生产一个完整的目录结构.
1、用户注册
前台页面代码,/views/reg.ejs
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form action="/users/reg/info" method="post">
<div>
用户名:<input type="text" name="username" autocomplete="off">
</div>
<div>
密 码:<input type="password" name="pwd" autocomplete="off">
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
</body>
</html>
服务端代码,/routers/user.js
var express = require('express');
var {Users} = require("./webdb.js"); //引入数据库配置文件
//系统用户注册页面
router.get('/reg',function(req,res,next){
res.render('admin/reg')
})
//提交用户注册信息
router.post('/reg/info', function(req, res, next) {
let users = req.body
console.log(users)
Users.create(users).then(rel=>{
if(rel){
res.render('admin/result',{
msg: '注册成功',
urlName: '登录',
url: '/zchoutai'
})
}else{
res.render('admin/result',{
msg: '注册失败',
urlName: '注册',
url: '/users/reg'
})
}
}).catch(err=>{
res.render('admin/result',{
msg: '注册出现异常',
urlName: '注册',
url: '/users/reg'
})
})
});
反馈页面,/views/admin/result.ejs
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div style="text-align:center;margin:30px;font-size:20px;">
<%=msg %>
<a href="<%=url %>">跳转到<%=urlName %></a>
</div>
</body>
</html>
2、用户登录
配置session,/app.js
var session = require('express-session');
app.use(cookieParser());//必须在此行下面添加session配置
app.use(session({
secret: 'recommand 128 bytes random string', // 建议使用 128 个字符的随机字符串
cookie: { maxAge: 20 * 60 * 1000 }, //cookie生存周期20*60秒
resave: true, //cookie之间的请求规则,假设每次登陆,就算会话存在也重新保存一次
saveUninitialized: true //强制保存未初始化的会话到存储器
}));
前台登录页面,/views/login.ejs
<!DOCTYPE html>
<html>
<body>
<form action="/users/login" method="post">
<input name="username" type="text" placeholder="用户名" autocomplete="off" />
<input name="pwd" type="password" placeholder="密码" autocomplete="off" />
<input value="登录" style="width:100%;" type="submit">
</form>
</body>
</html>
服务端处理用户登录,/routers/users.js
var express = require('express');
var router = express.Router();
var {Users} = require("./webdb.js")
//系统后台登录
router.post('/login', function(req, res, next) {
let users = req.body
Users.findOne(users).then(rel=>{
if(rel){
//保存session
req.session.username = users.username
req.session.pwd = users.pwd
res.redirect('/zchoutai/main')
}else{
res.render('admin/login',{
msg: '账号或密码错误'
})
}
}).catch(err=>{
res.render('admin/login',{
msg: '登录出现异常'
})
})
});
session的常用方法:
//保存session
req.session.username="张三"
//获取session
req.session.username
//重新设置cookie的过期时间
req.session.cookie.maxAge=1000;
//销毁session
req.session.destroy(function(err){
})
cookie的常用方法:
//设置cookie,HttpOnly 默认 false 不允许客户端脚本访问
//res.cookie(名称,值,{配置信息})
res.cookie("name",'zhangsan',{maxAge: 900000, httpOnly: true});
//获取cookie
req.cookies.name
//删除cookie
res.cookie('rememberme', '', { expires: new Date(0)});
res.cookie('username','zhangsan',{domain:'.ccc.com',maxAge:0,httpOnly:true});
cookie配置信息参数:
domain: 域名
name=value:键值对,可以设置要保存的 Key/Value,注意这里的 name 不能和其他属性项的名字一样
Expires: 过期时间(秒),在设置的某个时间点后该 Cookie 就会失效,如 expires=Wednesday, 09-Nov-99 23:12:40 GMT。
maxAge: 最大失效时间(毫秒),设置在多少后失效 。
secure: 当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效 。
Path: 表示 在那个路由下可以访问到cookie。
httpOnly:是微软对 COOKIE 做的扩展。如果在 COOKIE 中设置了“httpOnly”属性,则通过程序(JS 脚本、applet 等)将无法读取到COOKIE 信息,防止 XSS 攻击的产生 。
singed:表示是否签名cookie, 设为true 会对这个 cookie 签名,这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务器拒绝,并且 cookie 值会重置为它的原始值。
3、加密 Cookie
1.配置中间件的时候需要传参
var cookieParser = require('cookie-parser');
app.use(cookieParser('123456')); 12
2.设置 cookie 的时候配置 signed 属性
res.cookie('userinfo','hahaha',{domain:'.ccc.com',maxAge:900000,httpOnly:true,signed:true}); 1
3.signedCookies 调用设置的 cookie
console.log(req.signedCookies); 1
demo:
/*
maxAge 过期时间
domain:'.aaa.com' 多个二级域名共享cookie
path 表示在哪个路由下面可以访问cookie
httpOnly:true 设置为true,表示只有在nodejs服务端可以操作cookie ,没法用js脚本语言操作cookie
signed属性设置成true 表示加密cookie信息
让用户看不到cookie明文信息
1.保存的时候加密
2.cookie-parser里面 signed属性设置成true
cookie的加密:
1.参数表示加密的随机字符串
app.use(cookieParser('sign'));
2.设置
res.cookie('userinfo','cookie222_info',{maxAge:600000,signed:true});
3.使用 获取
req.signedCookies
*/
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
app.use(cookieParser('sign'));
app.get("/",function(req,res){
//console.log(req.cookies);
console.log(req.signedCookies); /*获取加密的cookie信息*/
res.send("你好nodejs");
});
app.get("/set",function(req,res){
//参数1:名字
//参数2:cookie的值
//参数3:cookie的配置信息
res.cookie('userinfo','cookie222_info',{maxAge:600000,signed:true});
res.send("设置cookie成功");
});
app.listen(3001,'127.0.0.1');
项目借鉴的是node.js web 全栈开发实战 书的代码.
需要完整代码的盆友, 可以到公众号下留言.
转载请注明:QMT|Ptrade量化交易 » node.js cookie与session的应用 | 用户注册与登录 | 附完整代码例子