当我们登录成功, 在这个页面刷新, 页面并没有保存登录状态; 今天我们就来看一下如何在后台使用 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 class="mainRight">
- <div class="rightBox" id="userInfo" style="display:none;">
- <div class="title"><span > 用户信息 </span></div>
- <p><span class="colDark username">admin</span></p>
- <p><span class="colDanger info"> 你好, 你是管理员,<a href="/admin"> 你可以点击这里进入管理 </a>
- </span></p>
- <p><span class="colDark logout"><a href="javascript:;"> 退出 </a></span></p>
- </div>
- <div class="rightBox" id="loginBox" style="display:none;">
- <div class="title"><span > 登录 </span></div>
- <div class="line"><span class="colDark"> 用户名:</span><input name="username" type="text" />
- <em></em></div>
- <div class="line"><span class="colDark"> 密码:</span><input name="password" type="password"/>
- <em></em></div>
- <div class="line"><span class="colDark"></span><button > 登 录 </button></div>
- <p class="textRight"> 还没注册?<a href="javascript:;" class="colMint"> 马上注册 </a> </p>
- <p class="colWarning textCenter"></p>
- </div>
- <div class="rightBox" id="registerBox">
- <div class="title"><span > 注册 </span></div>
- <div class="line"><span class="colDark"> 用户名:</span><input name="username" type="text" />
- </div>
- <div class="line"><span class="colDark"> 密码:</span><input name="password" type="password"/>
- </div>
- <div class="line"><span class="colDark"> 确认:</span>
- <input name="repassword" type="password"/></div>
- <div class="line"><span class="colDark"></span><button > 注 册 </button></div>
- <p class="textRight"> 已有账号?<a href="javascript:;" class="colMint"> 马上登录 </a> </p>
- <p class="colWarning textCenter"></p>
- </div>
- <div class="rightBox">
- <div class="title"><span > 社区 </span></div>
- <p><a href="http://www.miaov.com" target="_blank" class="colDanger"> 妙味课堂 </a></p>
- <p><a href="http://bbs.miaov.com" target="_blank" class="colDanger"> 妙味茶馆 </a></p>
- </div>
- </div>
3, 在 index.JS 中
var $userInfo = $('#userInfo');// 获得登录以后页面
4, 用户成功登录以后, 要显示 HTML 中 userInfo 页面
在 index.HTML 中修改成如下
- <div class="rightBox" id="userInfo" style="display:none;">
- <div class="title"><span > 用户信息 </span></div>
- <p><span class="colDark username"></span></p>
- <p><span class="colDanger info"></span></p>
- <p><span class="colDark logout"><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 class="rightBox" id="userInfo">
- <div class="title"><span > 用户信息 </span></div>
- <p><span class="colDark username">{{userInfo.username}}</span></p>
- <p><span class="colDanger info"> 你好, 欢迎光临我的博客!</span></p>
- <p><span class="colDark logout"><a href="javascript:;"> 退出 </a></span></p>
- </div>
- {% else %}
- <div class="rightBox" id="loginBox" style="display:none;">
- <div class="title"><span > 登录 </span></div>
- <div class="line"><span class="colDark"> 用户名:</span>
- <input name="username" type="text" /><em></em></div>
- <div class="line"><span class="colDark"> 密码:</span>
- <input name="password" type="password" /><em></em>
- </div>
- <div class="line"><span class="colDark"></span><button > 登 录 </button></div>
- <p class="textRight"> 还没注册?<a href="javascript:;" class="colMint"> 马上注册 </a> </p>
- <p class="colWarning textCenter"></p>
- </div>
- <div class="rightBox" id="registerBox">
- <div class="title"><span > 注册 </span></div>
- <div class="line"><span class="colDark"> 用户名:</span>
- <input name="username" type="text" /></div>
- <div class="line"><span class="colDark"> 密码:</span>
- <input name="password" type="password" /></div>
- <div class="line"><span class="colDark"> 确认:</span>
- <input name="repassword" type="password" /></div>
- <div class="line"><span class="colDark"></span><button > 注 册 </button></div>
- <p class="textRight"> 已有账号?<a href="javascript:;" class="colMint"> 马上登录 </a> </p>
- <p class="colWarning textCenter"></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);
- Windows.location.reload();
- }
- }
- })
- })
6, 用户退出,
(1)index.HTML 中
<p><span class="colDark"><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){
- Windows.location.reload();
- }
- }
- })
- })
(3) 在 API.JS 中
- // 退出
- router.get('/user/logout',function (reqres) {
- req.cookies.set('userInfo',null);
- res.JSON(responseData);
- })
来源: http://www.css88.com/qa/node-js/10806.html