node如何实现保持登录状态?

更新日期: 2019-08-26阅读: 2.2k标签: 状态

当我们登录成功,在这个页面刷新,页面并没有保存登录状态;今天我们就来看一下如何在后台使用cookie保存用户登录状态。做到刷新页面仍然显示在用户登录界面。


node实现保持登录状态的方法如下:

登录设置:

1、首先在index.js中加入用户登录的ajax数据传输

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                 if(!result.code){
                    //登录成功
                    setTimeout(function(){
                        $loginBox.hide();
                        $userInfo.show();
                    },1000);
                }
            }
        })
    })

2、在api.js中加入登录路由

//登录
router.post('/user/login',function (req,res) {//新增路由
    var username=req.body.username;
    var password=req.body.password;
 
    if(username == ''|| password==''){
        responseData.code=1;
        responseData.message='用户名和密码不能为空';
        res.json(responseData);
        return;
    }
    //查询数据库中相同用户名和密码的记录是否存在,如果存在则登录成功
    User.findOne({
        username:username,
        password:password
    }).then(function (userInfo) {
        if(!userInfo){
            responseData.code=2;
            responseData.message='用户名或密码错误';
            res.json(responseData);
            return;
        }
        //用户名和密码是正确的
        responseData.message='登录成功';
        responseData.userInfo={
            _id:userInfo._id,
            username:userInfo.username
        }
        res.json(responseData);
        return;
    });
});

补充:index.html页面中登录,注册,已登录的页面情况

<div>
 
 
        <div id="userInfo">
           <div><span>用户信息</span></div>
           <p><span>admin</span></p>
 
           <p><span>你好,你是管理员,<a href="/admin">你可以点击这里进入管理</a>
           </span></p>
 
           <p><span><a href="javascript:;">退出</a></span></p>
        </div>
 
        <div id="loginBox">
           <div><span>登录</span></div>
           <div><span>用户名:</span><input name="username" type="text" />
           <em></em></div>
           <div><span>密码:</span><input name="password" type="password"/>
           <em></em></div>
           <div><span></span><button>登 录</button></div>
           <p>还没注册?<a href="javascript:;">马上注册</a> </p>
           <p></p>
        </div>
 
        <div id="registerBox" >
           <div><span>注册</span></div>
           <div><span>用户名:</span><input name="username" type="text" />
           </div>
           <div><span>密码:</span><input name="password" type="password"/>
           </div>
           <div><span>确认:</span>
           <input name="repassword" type="password"/></div>
           <div><span></span><button>注 册</button></div>
           <p>已有账号?<a href="javascript:;">马上登录</a> </p>
           <p></p>
        </div>
 
 
        <div>
            <div><span>社区</span></div>
            <p><a href="http://www.miaov.com" target="_blank">妙味课堂</a></p>
            <p><a href="http://bbs.miaov.com" target="_blank">妙味茶馆</a></p>
        </div>
    </div>

3、在index.js中

var $userInfo = $('#userInfo');//获得登录以后页面

4、用户成功登录以后,要显示html中userInfo页面

在index.html中修改成如下

<div id="userInfo">
            <div><span>用户信息</span></div>
            <p><span></span></p>
 
            <p><span></span></p>
 
            <p><span><a href="javascript:;">退出</a></span></p>
        </div>

在index.js中修改

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                //提示信息
                $loginBox.find('.colWarning').html(result.message);
                if(!result.code){
                    //登录成功
                    setTimeout(function(){
                        $loginBox.hide();
                        $userInfo.show();
                        //显示登录用户的信息
                        $userInfo.find('.username').html(result.userInfo.username);
                        $userInfo.find('.info').html('你好,欢迎光临我的博客');
                    },1000);
                }
            }
        })
    })

5、用户登录成功以后,但是当我们刷新页面的时候,就退出登录状态了,我们需要运用cookie记录用户登录状态

使用cookie记录用户登录状态的方法:

(1) 在app.js中引入cookie模块

//加载cookie模块
var cookies = require('cookies');
//对cookie进行相关设置
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    next(); //不要忘记
});

(2)在api.js的登录路由中,不仅要返回页面信息,也需要发送一个cookie

//用户名和密码是正确的
        responseData.message='登录成功';
        responseData.userInfo={
            _id:userInfo._id,
            username:userInfo.username
        }
        req.cookies.set('userInfo',JSON.stringify({
            _id:userInfo._id,
            username:userInfo.username
        }));
        res.json(responseData);
        return;

(3)发现完成以后,信息头里面已经有了cookie信息,但是页面刷新的时候,仍然不能保持登录

在app.js中,将cookie的进行如下修改

//对cookie进行相关设置
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    //设置一个全局访问的页面,解析用户登录的cookie信息
    req.userInfo={};
    if(req.cookies.get('userInfo')){
        try{
            req.userInfo=JSON.parse(req.cookies.get('userInfo'));
        }catch (e){}
    }
    next();
});

在模板main.js中,分配模板

var express = require('express');
var router =express.Router();
router.get('/',function(req,res,next) {
    res.render('main/index',{ //第二个参数分配模板
        userInfo:req.userInfo
    });//渲染当前views下面的index.html页面
 
});

在index.html中进行判断分析

{% if userInfo._id %} <!--模板语言-->
       <div id="userInfo">
            <div><span>用户信息</span></div>
            <p><span>{{userInfo.username}}</span></p>
 
            <p><span>你好,欢迎光临我的博客!</span></p>
 
            <p><span><a href="javascript:;">退出</a></span></p>
        </div>
        {% else %}
        <div id="loginBox">
           <div><span>登录</span></div>
           <div><span>用户名:</span>
           <input name="username" type="text" /><em></em></div>
           <div><span>密码:</span>
           <input name="password" type="password" /><em></em>
           </div>
           <div><span></span><button>登 录</button></div>
           <p>还没注册?<a href="javascript:;">马上注册</a> </p>
           <p></p>
        </div>
 
        <div id="registerBox" >
            <div><span>注册</span></div>
            <div><span>用户名:</span>
            <input name="username" type="text" /></div>
            <div><span>密码:</span>
            <input name="password" type="password" /></div>
            <div><span>确认:</span>
            <input name="repassword" type="password" /></div>
            <div><span></span><button>注 册</button></div>
            <p>已有账号?<a href="javascript:;">马上登录</a> </p>
            <p></p>
        </div>
        {% endif %}

(4)在登录成功,以后就不需要在index.js中将页面隐藏,只需要刷新页面即可

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                //提示信息
                $loginBox.find('.colWarning').html(result.message);
                if(!result.code){
                    //登录成功
                    // setTimeout(function(){
                    //     $loginBox.hide();
                    //     $userInfo.show();
                    //     //显示登录用户的信息
                    //     $userInfo.find('.username').html(result.userInfo.username);
                    //     $userInfo.find('.info').html('你好,欢迎光临我的博客');
                    // },1000);
                    window.location.reload();
                }
            }
        })
    })

6、用户退出,

(1)index.html中

<p><span><a href="javascript:;" id="logout">退出</a></span></p>

(2)在index.js中,增加退出路由

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

(3)在api.js中

//退出
router.get('/user/logout',function (reqres) {
req.cookies.set('userInfo',null);
res.json(responseData);
})

链接: https://www.fly63.com/article/detial/7711

Javascript 状态管理工具 DataSet ,实现数据的订阅、查询、撤销和恢复

网页是用户与网站对接的入口,当我们允许用户在网页上进行一些频繁的操作时,对用户而言,误删、误操作是一件令人抓狂的事情,“如果时光可以倒流,这一切可以重来……”。

理解 React 轻量状态管理库 Unstated

在React写应用的时候,难免遇到跨组件通信的问题。现在已经有很多的解决方案。React本身的Context,Redux结合React-redux,Mobx结合mobx-react

你再也不用使用 Redux、Mobx、Flux 等状态管理了

这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后,没有想到代码可以这个玩。短短几行代码,仅仅使用 React Hooks ,就实现了状态管理的功能。

为什么要使用状态管理

我们平时开发的大部分项目,由于复杂度不够, 很少使用 Vuex、Redux 等状态管理库,就算引入了 Vuex 这些库,也只是当作一个全局数据引用,并非对应用状态进行管理。但一旦页面的复杂度比较高,必然要引入状态管理,今天就聊聊我理解中的状态管理。

React使用Hooks与Context替代Redux状态管理

React Hooks 在 2018 年年底就已经公布了,正式发布是在 2019 年 5 月,关于它到底能做什么用,并不在本文的探讨范围之内,本文旨在摸索,如何基于 Hooks 以及 Context,实现多组件的状态共享,完成一个精简版的 Redux。

如何使用react hooks来进行状态管理?

首先要明确为什么要使用redux,这一点很重要,如果不知道为什么使用redux,那么在开发的过程中肯定不能合理的使用redux.首先来看redux的本质:redux做为一款状态管理工具,主要是为了解决组件间通信的问题。

Flutter基础--状态管理

当我们使用编译器创建一个新Flutter应用的时候,我们可以在主界面看到两个小部件StatelessWidget和StatefulWidget。这是两个最常见使用最频繁的小部件了。StatelessWidget ,StatefulWidget

共享可变状态中出现的问题以及如何避免?

本文回答了以下问题:么是共享可变状态?为什么会出现问题?如何避免其问题?标有(高级)的部分会更深入,如果你想更快地阅读本文,可以跳过。

使用Observable实现Vue全局状态共享

项目不大, 又不想用Vuex, 那么使用Observable来实现状态共享也不失为一个选择。用法 :让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象

3条简单的React状态管规则

React组件内部的状态是在渲染之间保持不变的封装数据。useState()是React钩子,负责管理功能组件内部的状态。我喜欢useState()确实使状态处理变得非常容易。但是我经常遇到类似的问题:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!