您的位置：首页 > Web前端 > Node.js

nodejs基础教程-简单blog（5）-cookie保存用户登录状态

2017-12-26 11:32 786 查看
用户登录—前端发送登录请求—后端保存用户 cookies—页面刷新 —前端判断用户id存在—显示登录状态—用户退出—前端发送退出请求–后端清空用户cookies—页面刷新—前端判断用户id不存在—-显示需要登录的界面

当我们登录成功，在这个页面刷新，页面并没有保存登录状态；今天这节教程需要的效果就是。后台cookie保存用户登录状态。做到刷新页面仍然显示在用户登录界面；

app.js 设置中间件

var Cookies=require('cookies')
app.use(function (req,res,next) {
req.cookies=new Cookies(req,res)
next();
})


api.js



请求登录



刷新页面重新请求登录



在mian 中分配模板数据；



在index.html 使用模板变量； 如果存在userInfo._id 则显示欢迎您，否则显示请登录



如此登录状态得以保持；



上面的代码添加了
{{userInfo.username}}
这里需要注意的是后台模板引擎“双花括号”会和vue.js的产生冲突，冲突时的解决办法，
delimiters: ['${', '}'],
，如何使用，【nodejs基础教程-简单blog（3）-vue】这篇教程中有讲到；

现在我们做退出功能；

index.html中加入

logout: function () {
$.ajax({
type: 'post',
url: "/api/user/logout",
success: function (result) {
if (!result.code) {
alert(result.message)
window.location.reload();
}
}
});
},


appjs

//设置cookie
app.use(function (req,res,next) {
req.cookies=new Cookies(req,res)
console.log(typeof req.cookies.get('userInfo'))//返回 string；
//解析用户的cookie信息；
req.userInfo={};
var cookiesUserInfo=req.cookies.get('userInfo')
if(cookiesUserInfo){
try{
req.userInfo=JSON.parse(cookiesUserInfo)
}catch(e){}
}

next();
})


api.js中

router.post('/user/logout',function (req,res,next) {
console.log(req.body)
req.cookies.set('userInfo',null);
res.json(resoinseData)

});


用户登录—前端发送登录请求—后端保存用户 cookies—页面刷新 —前端判断用户id存在—显示登录状态—用户退出—前端发送退出请求–后端清空用户cookies—页面刷新—前端判断用户id不存在—-显示需要登录的界面

完整的index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/public/bg.css">

</head>
<body>
<div id="app2" v-cloak>
{% if userInfo._id%}
<div>
<h1 style="color:red" class="bg">{{userInfo.username}}，您好，欢迎您 </h1>
<button @click="logout">退出</button>
</div>
{% else %}
<div v-if="page==0">
<h1>登录</h1>
用户名：<input type="text" v-model="username">
密码： <input type="text" v-model="pwd">
<button @click="login">登录</button>
<button @click="registerPage">马上注册</button>
</div>
<div v-if="page==1">
<h1>注册</h1>
用户名：<input type="text" v-model="username">
密码： <input type="text" v-model="pwd">
确认密码： <input type="text" v-model="pwd2">
<button @click="register">注册</button>
</div>
{% endif %}

</div>

</body>
<script src="/public/jquery-1.4.2.min.js"></script>
<script src="/public/vue.js"></script>
<script>
var vm = new Vue({
delimiters: ['${', '}'],
el: '#app2',
data: {
username: '',
pwd: '',
pwd2: '',
page: 0,
message: "登录成功"
},
mounted: function () {

},
methods: {
login: function () {
$.ajax({
type: 'post',
url: "/api/user/login",
dataType: 'json',
data: {username: this.username, password: this.pwd},
success: function (result) {

if (result.code == 200) {
console.log(result)
window.location.reload();
alert(result.message)
} else {
alert(result.message)
}
}
});
},
logout: function () {
$.ajax({
type: 'post',
url: "/api/user/logout",
success: function (result) {
if (!result.code) {
alert(result.message)
window.location.reload();
}
}
});
},
registerPage: function () {
this.page = 1;
this.pwd = this.pwd2 = '';
},
register: function () {
if (this.pwd == '' || this.pwd2 == '') {
alert("用户名或密码不能为空")
return;
}
if (this.pwd != this.pwd2) {
alert("密码不一致!")
this.pwd = this.pwd2 = ''
return;
}

this.page = 1;
$.ajax({
type: 'post',
url: "/api/user/register",
data: {username: this.username, password: this.pwd},
dataType: 'json',
success: function (result) {
if (result.code == 200) {
console.log(result)
vm.page = 0;
alert(result.message)
} else {
alert(result.message)
}

}
});
}
}

});

</script>
</html>


api.js

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

//统一返回方式；
var resoinseData;
/**
* router.use([path],function)
* 当前路由将会使用此中间件
*/
//
router.use(function (req,res,next) {
resoinseData={
code:0,
message:''
}
next();
})
/**
* 用户注册
* 1，用户名是否存在；数据库查询；
* router.post:
* 处理任何以"/user/register"结束的请求

*/
router.post('/user/register',function (req,res,next) {
console.log(req.body)
var username=req.body.username;
var password=req.body.password;
if(username==''||password==''){
resoinseData.code=1
resoinseData.message='用户名或密码不能为空！'
res.json(resoinseData);//json格式返回给前端；
return
}
//findOne 查询是否存在用户名。如果存在说明用户已被注册
User.findOne({
username:username
}).then(function (userInfo) {
console.log(userInfo,"userInfo");
if(userInfo){
resoinseData.code=2
resoinseData.message='用户名已被注册！'
res.json(resoinseData)
return
}else{
//保存数据；
var user=new User(req.body);
return user.save();
}
}).then(function (newUserInfo) {
console.log(newUserInfo,"newUserInfo");
resoinseData.message='操作成功！'
resoinseData.code=200
res.json(resoinseData)
})

});

router.post('/user/login',function (req,res,next) {
console.log(req.body)
var username=req.body.username;
var password=req.body.password;
if(username==''||password==''){
resoinseData.code=1
resoinseData.message='用户名或密码不能为空！'
res.json(resoinseData);//json格式返回给前端；
return
}
//findOne 查询是否存在用户名。如果存在说明用户已被注册
User.findOne({
username:username,
password:password
}).then(function (userInfo) {
console.log(userInfo,"userInfo");
if(!userInfo){
resoinseData.code=2
resoinseData.message='用户名或密码错误'
res.json(resoinseData)
}else{
resoinseData.code=200
resoinseData.message='登录成功！'
resoinseData.userInfo={
_id:userInfo._id,
username:userInfo.username
}
req.cookies.set('userInfo',JSON.stringify(resoinseData.userInfo));
res.json(resoinseData)
return;
}
})
});

router.post('/user/logout',function (req,res,next) {
console.log(req.body)
req.cookies.set('userInfo',null);
res.json(resoinseData)

});

module.exports=router;


app.js



var mongoose=require('mongoose')
//应用启动入口
var express=require('express')

//模板处理模块
var swig=require('swig')
var Cookies=require('cookies')
//创建app应用 相当于=》NodeJS Http.createServer();
var app=express();

// /**
//  * 首页
//  *
//  */
// app.get('/',function (req,res,next) {
//     // res.send("<h1>欢迎光临我的博客！</h1>")
//     /**
//      * 读取views目录下的指定文件，解析并返回给客户端；
//      * 参数1：模板文件，相对于views；
//      * 参数2：传递给模板使用的数据；
//      */
//     res.render('index');
// })
//D:\Program Files\MongoDB\Server\3.4\bin>mongod --dbpath=E:\nodejsTest\blog2\db --port=27018

//加载body-parser，用来处理post提交过来的数据；
var bodyParser=require('body-parser');
/**
* //bodyParser配置
*  返回一个只解析urlencoded消息体的中间件，
*
*  urlencoded:url编码，只接受utf-8对消息体进行编码，
*  在前台返回的req对象添加一个新属性body，同时支持自动的gzip/deflate编码解析过的消息放在req.body对象中，
*  这个对象包含的键值对
*  当extended设置为true，是任何类型
*  当extended为false的时候，是string或者一个数组。
*  extended:如果设置为false，那么对URL-encoded的数据的解析采用querystring库，如果设置为true那么采用qs
*/
app.use(bodyParser.urlencoded({extended:true}))

// var mongoose=require('mongoose')
// //加载模板
// var swig=require('swig')
/**
* 定义模板引擎
* 参数1：引擎名称，模板文件后缀；
* 参数2：用于解析处理模板内容的方法
*/
app.engine('html',swig.renderFile);
/**
* 设置模板文件存放目录
* 参数1，必须是views。
* 参数2，是目录
*/
app.set('views','./views');
/**
* 注册使用的模板引擎；
* 参数1，必须是'view engine'
* 参数2，被注册的模板引擎的名称；
*/
app.set('view engine','html')
/**
* 开发过程中需要取消模板缓存
* 改变html时，直接刷新就可以不需要重启服务；
*/
//设置静态文件托管
app.use('/public',express.static(__dirname+"/public"))
swig.setDefaults({cache:false})
//
//
//
//
//设置cookie
app.use(function (req,res,next) {
req.cookies=new Cookies(req,res)
console.log(typeof req.cookies.get('userInfo'))//返回 string；
//解析用户的cookie信息；
req.userInfo={};
var cookiesUserInfo=req.cookies.get('userInfo')
if(cookiesUserInfo){
try{
req.userInfo=JSON.parse(cookiesUserInfo)
}catch(e){}
}

next();
})

/**
* 根据不同功能划分模块
*/
app.use('/admin',require('./routers/admin'))
app.use('/api',require('./routers/api'))
app.use('/',require('./routers/main'))

//
// //连接数据库
// mongoose.connect('mongodb://localhost:27018/blog',function (err) {
//     if(err){
//         console.log("数据库连接失败")
//
//     }else{
//         console.log("数据库连接成功")
//         //监听http请求
//         app.listen(8089);
//     }
// })
//

mongoose.connect('mongodb://localhost:27018/blog2',function (err) {
if(err){
console.log('数据连接失败')
}else{
console.log('数据连接成功')
//监听app请求；
app.listen("8089")
}
});

//用户发送http请求--》url-》解析路由--》找到匹配的规则-》指定绑定函数，返回对应内容至用户
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  cookie nodejs 中间件
相关文章推荐
新的分享
章节导航