NodeJS博客实战10_cookie的使用

用户登录博客后退出前再次进入博客，用户进入博客的登录验证，还有用户信息的展示都可以通过cookies的设置实现；

cookie的设置在该项目中需要依赖cookies模块；

流程为：

当用户登录后，后端将用户信息以cookie的形式发送给浏览器，当浏览器再次刷新或重新打开的时候，如果这cookie没有被清除，则浏览器会将其放在头部发送给服务器；

服务器获取cookie后会尝试进行解析，解析成功是用户登录信息后，会返回给html模板，通过swig模板渲染来实现登录后的页面呈现。

首先在app.js中引入cookies模块：

var Cookies = require('cookies'); ;//加载cookies模块

同样在app.js里面敲出解析cookie的代码：

解析成功的cookie信息返回给html模块由各个路由进行操作，因此返回的cookie信息需要存为全局对象，req作为全局对象可以用来保存cookie供给各个路由调用；

cookie在浏览器保存的为字符串格式，需要用JSON.parse进行尝试解析；

//设置cookie
app.use(function(req,res,next){
	req.cookies = new Cookies(req,res); //调用req的cookies方法把Cookies加载到req对象里面
	req.userInfo = {}; //定义一个全局访问对象
	//如果浏览器请求有cookie信息,尝试解析cookie
	if(req.cookies.get('userInfo')){
		try{
			req.userInfo = JSON.parse(req.cookies.get('userInfo'));
		}catch(e){}
	}

	next();
})

在接口api.js设置返回cookie信息：

用户登陆成功服务器需要把cookie以键值对返回，值为用户信息对象字符串，便于浏览器储存；

router.post('/user/login',function(req,res){
	var username = req.body.username;
	var password = req.body.password;
	if(username == '' || password == ''){
		resData.code = 1;
		resData.message = '用户名或密码不能为空';
		res.json(resData);
		return;
	}
	//查询数据库验证用户名和密码
	User.findOne({
		username: username,
		password: password
	}).then(function(userInfo){
		if(!userInfo){
			resData.code = 2;
			resData.message = '用户名或密码错误';
			res.json(resData);
			return;
		}
		//验证通过则登录
		resData.message = '登录成功';
		resData.userInfo = {
			_id: userInfo._id,
			username: userInfo.username
		};
		//使用req.cookies的set方法把用户信息发送cookie信息给浏览器，浏览器将cookies信息保存，再次登录浏览器会将cookies信息放在头部发送给你服务端，服务端验证登录状态
		req.cookies.set('userInfo',JSON.stringify({
			_id: userInfo._id,
			username: userInfo.username
		}));
		res.json(resData);
		return;
	})
})

再次进入页面，若cookie没有清除，则服务器会将其返回，在主页面有main.js进行返回，cookie储存在全局对象req.userInfo中，因此直接返回：

main.js:

var express = require('express');
var router = express.Router();

router.get('/',function(req,res,next){
	//将第二个参数用户的cookies传给html使用
	res.render('main/index.html',{
		userInfo:req.userInfo
	});
})

module.exports = router;

返回的cookie需要用于对页面进行渲染：

使用swig的渲染语法:

{% if userInfo._id %}

//html代码A

{% else %}

//html代码B

{% endif % }

如果服务器返回的userInfo对象中_id存在，则显示A代码，否则显示B代码；

利用此语法可以展示出欢迎面板和隐藏登录和注册面板

{% if userInfo._id %}
				<div class="showInfo">
					<p class="infoTitle">用户信息</p>
					<div class="name">{{userInfo.username}}</div>
					<div class="info">你好，欢迎来到博客</div>
					<button class="logout">退出</button>
				</div>
{% else %}
				<div class="registerInfo">
					<form>
						<p class="infoTitle">注册</p>
						<div class="inputInfo">
							<label for="user">用户名</label>
							<input type="text" name="username" id="user">
						</div>
						<div class="inputInfo">
							<label for="pwd">密码</label>
							<input type="password" name="pwd" id="pwd">
						</div>
						<div class="inputInfo">
							<label for="rpwd">确认</label>
							<input type="password" name="rpwd" id="rpwd">
						</div>
						<div class="infoBtn">
							<input type="button" name="" value="注册" class="registerBtn">
						</div>
						<div class="infoBtn">
							<span>已有账号</span>
							<a href="javascript:void(0)" class="toLogin">马上登录</a>
						</div>
						<div class="registerRemind"></div>
					</form>
				</div>
				<div class="hide loginInfo">
					<form>
						<p class="infoTitle">登录</p>
						<div class="inputInfo">
							<label for="user2">用户名</label>
							<input type="text" name="user2" id="user2">
						</div>
						<div class="inputInfo">
							<label for="pwd2">密码</label>
							<input type="password" name="pwd2" id="pwd2">
						</div>
						<div class="infoBtn">
							<input type="button" name="" value="登录" class="loginBtn">
						</div>
						<div class="infoBtn">
							<span>还没注册</span>
							<a href="javascript:void(0)" class="toRegister">马上注册</a>
						</div>
						<div class="loginRemind"></div>
					</form>
				</div>
{% endif %}

由于cookie的使用，所以登录成功后，不需要使用js进行跳转和隐藏登录表单，只需要刷新页面即可：

index.js:

	//登录
	loginBtn.on('click',function(){
		$.ajax({
			type: 'post',
			url: '/api/user/login',
			data: {
				username:loginInfo.find('[name="user2"]').val(),
				password:loginInfo.find('[name="pwd2"]').val()
			},
			dataType: 'json',
			success: function(res){
				loginRemind.html(res.message);//返回提示信息
				if(!res.code){
					window.location.reload();
				}
			}
		})
	})

登出功能的实现：

注销登录即发送一个请求，服务器清除cookie返回即可：

index.js

	//退出
	logout.on('click',function(){
		$.ajax({
			url:'/api/user/logout',
			success: function(res){
				if(!res.code){
					window.location.reload();
				}
			}
		})
	})

api.js:

//注销登录
router.get('/user/logout',function(req,res){
	req.cookies.set('userInfo',null);
	res.json(resData);
})

登录成功和刷新后cookie在浏览器中的存储