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

最新推荐文章于 2024-06-02 17:43:24 发布
最新推荐文章于 2024-06-02 17:43:24 发布
阅读量7k 收藏 7
点赞数 1
分类专栏： html5 node express vue 文章标签： cookie nodejs 中间件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012123026/article/details/78900472
版权
html5 同时被 3 个专栏收录
44 篇文章 2 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏
node
21 篇文章 0 订阅
订阅专栏

用户登录—前端发送登录请求—后端保存用户 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-》解析路由--》找到匹配的规则-》指定绑定函数，返回对应内容至用户
久如云漂泊
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
node.js使用axios-cookiejar-support保存cookie
蛐蛐的博客
02-14 1250
地址：GitHub - 3846masa/axios-cookiejar-support: Add tough-cookie support to axios. GitHub - salesforce/tough-cookie: RFC6265 Cookies and CookieJar for Node.js 1.简介 axios-cookiejar-support添加了tough-cookie对 axios 的支持。 axios：node.js和浏览器都可以使用的http请求工具包 t
node中如何使用cookie进行登陆状态的客户端存储
qq_45189315的博客
04-08 390
1.为什么要存储登录状态? 因为在企业开发中有一些操作是只有登录之后才能操作的 例如: 编辑用户信息, 查看用户订单等 所以我们在登录之后需要存储用户的登录状态, 以后在涉及到一些敏感操作的时候, 我们就可以通过这个状态来判断用户是否已经登录 来决定是否让用户进行相关敏感操作 2.如何存储用户登录状态? 2.1客户端存储 Cookie 直接用document.cookie=“name=lily;” 2.2服务端存储 Session 那么这篇文章我们讲解利用Cookie进行客户端的存储: 3.Cooki
Node.js使用cookie保持登录的方法
01-02
这次来做一个网站登录的小例子，后面会用到。这个示例会用到Cookie、HTML表单、POST数据体(body)解析。 第一个版本，我们的用户数据就写死在js文件里。第二个版本会引入MongoDB来保存用户数据。 示例准备 1. 使用express创建应用 就下面的命令序列： express LoginDemo cd LoginDemo npm install 2. 登录页面 登录页面的jade模板为login.jade，内容如下： doctype html html head meta(charset='UTF-8') title 登录 link(rel='styleshee
基于node.js使用express和session实现登录状态的保存
紫月i的博客
10-11 1068
因为http是无状态的，所以在网页中输入的数据如果没有保存到数据库当中，一旦刷新页面就会变回原来的样子，所以用户的登录状态需要使用cookie，session或者token来保存。本篇文章就使用node.js 来设置session来实现登录状态的保存 文章当中涉及express和MongoDB的操作 express基础知识：https://blog.csdn.net/ziyue13/article/details/114716481 node.js操作MySQL：https://blog.csdn.net/
node会话管理详解（cookie、session、token）
最新发布
2301_76669854的博客
06-02 756
在Node.js中，cookie、session和token都是用于会话管理的机制，但它们各自有不同的使用场景和特性。
node.js学习笔记(9)--使用cookie与session保持登录
minixu的博客
08-04 5804
我们来做一个使用cookie和seesion保持网站持久登录的例子，来让我们了解在node是如何使用他们的 1.初始化项目 我们使用express项目生成器生成一个项目： $express -e cookie $cd cookie $npm install 使用cookie需要 cookie-parser中间件，我们的express生成的项目中已经帮我们配置好了。 2.新增
Node学习（九）063-会话技术简介之cookie的设置和获取——会话控制的分类之cookie-保存客户端（浏览器）、session-保存服务器 & cookie的设置与获取 & cookie有效期
weixin_44867717的博客
03-28 774
cookie
node中如何使用JWT(JSON Web Token)进行登陆状态的客户端存储
qq_45189315的博客
04-08 515
登陆状态的客户端存储有三种存储方式: (1)cookie: 如果存储的内容体积不大,可以存储在cookie中; (2) sessionStorage: 如果不需要持久化存储,可以将token存储在这里; (3)localStorage: 如果体积较大, 又需要持久化存储,可以将token存储在这里; ...
NodeJs(11)——Cookie&&Session的使用
没有途径，只有努力
02-23 754
目录 Cookie ----Cookie的属性 ----Cookie的使用方案 ----Cookie的使用示例 Session ----Session的属性 ----Session的使用示例 Cookie 服务端向客户端发送Cookie 客户端的浏览器把Cookie保存 然后在每次请求浏览器都会将Cookie发送到服务端 在HTML文档被发送之前，Web服务器通过传送HTTP 包头中的Set-Cookie 消息把一个cookie 发送到用户的浏览器中 用于保存网页数据,我常常用来保存浏览记录…
nodejs之操作状态保持技术cookie和session
ｎｅｗｘｃ
12-13 1561
因为 http 是一种无状态协议，浏览器请求服务器是无状态的。 无状态：指一次用户请求时，浏览器、服务器无法知道之前这个用户做过什么，每次请求都是一次新的请求。 无状态原因：浏览器与服务器是使用 socket 套接字进行通信的，服务器将请求结果返回给浏览器之后，会关闭当前的 socket 连接，而且服务器也会在处理页面完毕之后销毁页面对象。 有时需要保持下来用户浏览的状态，比如用户是否登录过，浏览过哪些商品等 实现状态保持主要有两种方式： 在客户端存储信..
【nodejs学习笔记】用户登录相关：cookie、session 和 redis的使用和优缺点
种一棵树最好的时间是十年前，其次是现在。
10-31 657
用户登录相关的知识点：cookie、session和redis的使用及优缺点。cookie如何实现登录校验？为什么要用session？为什么要用redis？
nodejs使用express-session做登录状态保持
weixin_44025657的博客
08-27 1290
关于req.session无法获取登录状态的一些常见可能的错误
node实现登录状态保持(cookie-session/token)
weixin_44395929的博客
03-12 3928
//今天回顾一下用户登录后如何保持这个状态() 一、cookie-session //express是nodejs的一个封装库(关系就像js和jQuery),需要导入使用 let express = require("express") //cookie-session是express的一个中间件,需要导入使用 let cookieSession =...
Node写博客--用户登录和用cookie保存用户登录状态
幽幽幽幽古溪
08-16 2898
1.首先在index.js中加入用户登录的ajax数据传输 //登录 $loginBox.find('button').on('click',function () { //通过ajax提交请求 $.ajax({ type:'post', url:'/api/user/login', ...
Node.js开发入门—使用cookie保持登录
热门推荐
安晓辉生涯——聚焦程序员的职业规划与成长
08-17 3万+
处理HTTP POST数据，使用cookie保持登录……
nodejs中cookie的基本使用
jiuweideqixu的博客
01-25 1万+
/* * 1、安装 npm install cookie-parser --save * 2、引入var cookieParser = * 3、设置中间件 app.use() * 4、设置cookie HttpOnly默认fals不允许客户端脚本访问， * 允许后端进行访问，也允许nodejs进行访问，但不允许前端的js代码进行访问 * 5、获取cookie * *...
NodeJS 操作cookie
weixin_39415598的博客
07-05 1683
本文简介 点赞 + 关注 + 收藏 = 学会了 虽然现在在浏览器存储数据大多时候都使用 LocalStorage 和 SessionStorage 了，但 cookie 还是有用的。 cookie 是一个5k的小仓库，存的东西不多，而且是以字符串的形式存储的。 cookie 的格式是：key1=value1; key2=value2; key3=value3; 在后端处理登录状态时也会用到 cookie 。前端每次发送 http 请求时都会将清秋浴的 cookie 一起发送给服务端。 而后端也可以设
Nodejs-Cookie的设置
SpringDou的博客
11-15 3553
在web开发的过程中 cookie 肯定需要接触的，一个典型的应用是关于用户登录的，如果用户登录之后，再关闭，下次打开该网页已经自动登录，这样就可以利用服务器端发送cookie到客户端，再客户端存下来就可以了，当然也可以客户端自己存储登录信息到cookie，然后再打开网页的时候，自动发送保存的用户信息到服务端进行验证，具体cookie用来干什么的，可以自己google一下。 目前我自己使用了两种...
nodejs中cookie,session保存内存，缓存，数据库中
Leowang的博客
07-30 1906
http://wiki.jikexueyuan.com/project/node-lessons/cookie-session.html
在nodejs中的axios保持cookie
陌生人的博客
03-30 4970
使用了thinkjs框架，其它的环境大同小异，为防止以后会用到，特此记录 const Base = require('./base.js'); const axios = require('axios'); const tough = require('tough-cookie'); const axiosCookieJarSupport = require('axios-cookiejar-s...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值