Node.js开发入门—使用cookie保持登录

最新推荐文章于 2024-09-28 23:21:13 发布

foruok

最新推荐文章于 2024-09-28 23:21:13 发布

阅读量3.4w

点赞数 12

分类专栏：网络编程 Node.js开发入门文章标签： node-js angularjs express cookie http服务器

本文链接：https://blog.csdn.net/foruok/article/details/47719063

版权

本文介绍如何使用Node.js、Express和cookie实现网站登录功能，包括处理POST数据、设置cookie实现持久登录。示例代码展示了从简单的静态用户数据到利用MongoDB存储用户信息的过程。

摘要由CSDN通过智能技术生成

这次来做一个网站登录的小例子，后面会用到。这个示例会用到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='stylesheet', href='/stylesheets/login.css')
  body
    .form-container
      p.form-header 登录
      form(action='login', method='POST', align='center')
        table
          tr
            td
              label(for='user') 账号：
            td
              input#user(type='text', name='login_username')
          tr
            td
              label(for='pwd') 密码：
            td
              input#pwd(type='password', name='login_password')
          tr
            td(colspan='2', align='right')
              input(type='submit', value='登录')
    p #{msg}

这个模板的最后是一条动态消息，用于显示登录错误信息，msg变量由应用程序传入。

我给login页面写了个简单的CSS，login.css文件，内容如下：

form {
  margin: 12px;
}
a {
  color: #00B7FF;
}

div.form-container {
  display: inline-block;
  border: 6px solid steelblue;
  width: 280px;
  border-radius: 10px;
  margin: 12px;
}

p.form-header {
  margin: 0px;
  font: 24px bold;
  color: white;
  background: steelblue;
  text-align: center;
}

input[type=submit]{
  font: 18px bold;
  width: 120px;
  margin-left: 12px;
}

请把login.css放在public/stylesheets目录下。

3. profile页面

登录成功后会显示配置页面，profile.jade页面内容：

doctype html
html
  head
    meta(charset='UTF-8')
    title= title
  body
    p #{msg}
    p #{lastTime}
    p 
      a(href='/logout') 退出

profile.jade放在views目录下。profile页面显示一条登录成功的消息，还显示上次登录时间，最后提供了一个退出链接。

4. app.js改动

我改动了app.js，以便用户在没有登录时访问网站自动跳转到login页面。新的app.js内容如下：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser &#