Node.js使用cookie保持登录的方法

日期：2020-05-11 栏目：程序人生浏览：次

这次来做一个网站登录的小例子，后面会用到。这个示例会用到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 = require('body-parser');

var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.all('*', users.requireAuthentication);
app.use('/', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
 app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
   message: err.message,
   error: err
  });
 });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
 res.status(err.status || 500);
 res.render('error', {
  message: err.message,
  error: {}
 });
});


module.exports = app;

转载注明出处：http://www.heiqu.com/166.html

Node.js使用cookie保持登录的方法

相关推荐