NodeJS博客实战10_cookie的使用

﹏ヽ暗。殇╰゛Y 2022-05-28 02:17 192阅读 0赞

用户登录博客后退出前再次进入博客，用户进入博客的登录验证，还有用户信息的展示都可以通过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在浏览器中的存储

![20180327230501508][]

[20180327230501508]: /images/20220528/98986d63470a4fe4b6f29e373cb9b606.png