Étapes détaillées pour utiliser les cookies pour rester connecté-js tutoriel-php.cn

Cette fois, je vais vous expliquer en détail les étapes à suivre pour utiliser les cookies pour rester connecté. Quelles sont les précautions pour utiliser les cookies pour rester connecté. Voici des cas pratiques, jetons un coup d'oeil .

Cette fois, je ferai un petit exemple de connexion à un site Web, qui sera utilisé plus tard. Cet exemple utilisera les cookies, le formulaire HTML et l'analyse du corps des données POST (corps).

Dans la première version, nos données utilisateur sont écrites dans le fichier js. La deuxième version introduira MongoDB pour sauvegarder les données utilisateur.

Exemple de préparation

1. Utilisez express pour créer une application

La séquence de commandes suivante :

express LoginDemo
cd LoginDemo
npm install

Copier après la connexion

2. Page de connexion

Le modèle jade de la page de connexion est login.jade, et le contenu est le suivant :

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}

Copier après la connexion

login.jade Placez-le dans le répertoire des vues. J'ai codé en dur les caractères chinois dans login.jade. Notez que le fichier est codé en UTF-8.

La fin de ce modèle est un message dynamique pour afficher le message d'erreur La variable msg est transmise par l'application.

J'ai écrit un CSS simple pour la page de connexion, le fichier login.css, le contenu est le suivant :

form {
 margin: 12px;
}
a {
 color: #00B7FF;
}
p.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;
}

Copier après la connexion

Veuillez mettre login.css dans le répertoire public/stylesheets.

3. Page de profil

Après une connexion réussie, la page de configuration s'affichera. Le contenu de la page profile.jade :

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

Copier après la connexion

profil. .jade est placé dans le répertoire des vues. La page de profil affiche un message de connexion réussie, affiche également l'heure de la dernière connexion et fournit enfin un lien de déconnexion.

4. Modifications d'App.js

J'ai modifié app.js afin que les utilisateurs puissent automatiquement accéder à la page de connexion lorsqu'ils visitent le site Web sans se connecter. Le contenu du nouveau app.js est le suivant :

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;

Copier après la connexion

5.users.js

J'ai modifié users.js pour ajouter l'authentification, la connexion et la déconnexion. et autre logique Pour le mettre à l'intérieur, convertissez d'abord users.js en encodage UTF-8 (désolé, les caractères chinois sont codés en dur). Contenu :

var express = require('express');
var router = express.Router();
var crypto = require('crypto');
function hashPW(userName, pwd){
 var hash = crypto.createHash('md5');
 hash.update(userName + pwd);
 return hash.digest('hex');
}
// just for tutorial, it's bad really
var userdb = [
  {
   userName: "admin",
   hash: hashPW("admin", "123456"),
   last: ""
  },
  {
   userName: "foruok",
   hash: hashPW("foruok", "888888"),
   last: ""
  }
 ];
function getLastLoginTime(userName){
 for(var i = 0; i < userdb.length; ++i){
  var user = userdb[i];
  if(userName === user.userName){
   return user.last;
  }
 }
 return "";
}
function updateLastLoginTime(userName){
 for(var i = 0; i < userdb.length; ++i){
  var user = userdb[i];
  if(userName === user.userName){
   user.last = Date().toString();
   return;
  }
 }
}
function authenticate(userName, hash){
 for(var i = 0; i < userdb.length; ++i){
  var user = userdb[i];
  if(userName === user.userName){
   if(hash === user.hash){
     return 0;
   }else{
     return 1;
   }
  }
 }
 return 2;
}
function isLogined(req){
 if(req.cookies["account"] != null){
  var account = req.cookies["account"];
  var user = account.account;
  var hash = account.hash;
  if(authenticate(user, hash)==0){
   console.log(req.cookies.account.account + " had logined.");
   return true;
  }
 }
 return false;
};
router.requireAuthentication = function(req, res, next){
 if(req.path == "/login"){
  next();
  return;
 }
 if(req.cookies["account"] != null){
  var account = req.cookies["account"];
  var user = account.account;
  var hash = account.hash;
  if(authenticate(user, hash)==0){
   console.log(req.cookies.account.account + " had logined.");
   next();
   return;
  }
 }
 console.log("not login, redirect to /login");
 res.redirect('/login?'+Date.now());
};
router.post('/login', function(req, res, next){
 var userName = req.body.login_username;
 var hash = hashPW(userName, req.body.login_password);
 console.log("login_username - " + userName + " password - " + req.body.login_password + " hash - " + hash);
 switch(authenticate(userName, hash)){
 case 0: //success
  var lastTime = getLastLoginTime(userName);
  updateLastLoginTime(userName);
  console.log("login ok, last - " + lastTime);
  res.cookie("account", {account: userName, hash: hash, last: lastTime}, {maxAge: 60000});
  res.redirect('/profile?'+Date.now());
  console.log("after redirect");
  break;
 case 1: //password error
  console.log("password error");
  res.render('login', {msg:"密码错误"});
  break;
 case 2: //user not found
  console.log("user not found");
  res.render('login', {msg:"用户名不存在"});
  break;
 }
});
router.get('/login', function(req, res, next){
 console.log("cookies:");
 console.log(req.cookies);
 if(isLogined(req)){
  res.redirect('/profile?'+Date.now());
 }else{
  res.render('login');
 }
});
router.get('/logout', function(req, res, next){
 res.clearCookie("account");
 res.redirect('/login?'+Date.now());
});
router.get('/profile', function(req, res, next){
 res.render('profile',{
  msg:"您登录为："+req.cookies["account"].account, 
  title:"登录成功",
  lastTime:"上次登录："+req.cookies["account"].last
 });
});
module.exports = router;

Copier après la connexion

Comme vous pouvez le voir, j'ai intégré deux comptes, admin et foruok. Lors de la connexion, je vérifierai ces deux comptes et signalerai une erreur s'ils sont incorrects.

D'accord, exécutez "npm start", puis ouvrez "http://localhost:3000" dans le navigateur, vous pouvez voir l'effet suivant :

Après l'avoir lancé plusieurs fois, connectez-vous, déconnectez-vous et reconnectez-vous, l'effet est le suivant :

D'accord, c'est l'effet de cet exemple. Nous expliquerons ensuite les concepts et certains codes utilisés.

Traitement des données du corps POST

Nous utilisons un formulaire HTML dans l'exemple pour recevoir le nom d'utilisateur et le mot de passe, lorsque le type d'élément d'entrée est soumis , cliquez dessus, le navigateur organisera les données du formulaire dans un certain format, les encodera dans le corps et les POST à l'adresse du serveur spécifiée. Le nom d'utilisateur et le mot de passe peuvent être trouvés côté serveur grâce à la valeur de l'attribut name de l'élément HTML .

Nous n'avons pas à nous soucier du processus d'analyse des données du formulaire par le serveur. Nous utilisons le middleware body-parser d'Express, qui le fera pour nous. Et ces codes de configuration, le générateur express nous a aidé à les compléter, comme suit :

//加载body-parser模块
var bodyParser = require('body-parser');
...
//应用中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

Copier après la connexion

Notre code de traitement des requêtes POST sur le chemin /login se trouve dans users.js, depuis "router.post('/ login '..." commence (ligne 94, ce serait génial si markdown pouvait insérer automatiquement des numéros de ligne dans le code). Le code qui fait référence au nom d'utilisateur dans le formulaire de connexion est le suivant :

var userName = req.body.login_username;

Copier après la connexion

Remarquez-le, objet express.Request Il y a un corps analysé dans req, et nous utilisons login_username pour accéder au nom d'utilisateur. Le login_username est la valeur de l'attribut name de notre élément d'entrée dans le HTML. 🎜>cookie

cookie，按我的理解，就是服务器发给浏览器的一张门票，要访问服务器内容，可以凭票入场，享受某种服务。服务器可以在门票上记录一些信息，从技术角度讲，想记啥记啥。当浏览器访问服务器时，HTTP头部把cookie信息带到服务器，服务器解析出来，校验当时记录在cookie里的信息。

HTTP协议本身是无状态的，而应用服务器往往想保存一些状态，cookie应运而生，由服务器颁发，通过HTTP头部传给浏览器，浏览器保存到本地。后续访问服务器时再通过HTTP头部传递给服务器。这样的交互，服务器就可以在cookie里记录一些用户相关的信息，比如是否登录了，账号了等等，然后就可以根据这些信息做一些动作，比如我们示例中的持久登录的实现，就利用了cookie。还有一些电子商务网站，实现购物车时也可能用到cookie。

cookie存储的是一些key-value对。在express里，Request和Response都有cookie相关的方法。Request实例req的cookies属性，保存了解析出的cookie，如果浏览器没发送cookie，那这个cookies对象就是一个空对象。

express有个插件，cookie-parser，可以帮助我们解析cookie。express生成的app.js已经自动为我们配置好了。相关代码：

var cookieParser = require('cookie-parser'); ... app.use(cookieParser());
Copier après la connexion

express的Response对象有一个cookie方法，可以回写给浏览器一个cookie。

下面的代码发送了一个名字叫做“account”的cookie，这个cookie的值是一个对象，对象内有三个属性。

复制代码代码如下:

res.cookie("account", {account: userName, hash: hash, last: lastTime}, {maxAge: 60000});

res.cookie()方法原型如下：

res.cookie(name, value [, options])
Copier après la connexion

文档在这里：http://expressjs.com/4x/api.html。

浏览器会解析HTTP头部里的cookie，根据过期时间决定保存策略。当再次访问服务器时，浏览器会把cookie带给服务器。服务器使用cookieParser解析后保存在Request对象的cookies属性里，req.cookies本身是一个对象，解析出来的cookie，会被关联到req.cookies的以cookie名字命名的属性上。比如示例给cookie起的名字叫account，服务端解析出的cookie，就可以通过req.cookies.account来访问。注意req.cookies.account本身既可能是简单的值也可能是一个对象。在示例中通过res.cookie()发送的名为account的cookie，它的值是一个对象，在这种情况下，服务器这边从HTTP请求中解析出的cookie也会被组装成一个对象，所以我们通过req.cookies.account.account就可以拿到浏览器通过cookie发过来的用户名。但如果浏览器没有发送名为“account”的cookie，那req.cookies.account.hash这种访问就会抛异常，所以我在代码里使用req.cookies[“account”]这种方式来检测是否有account这个cookie。

持久登录

如果用户每次访问一个需要鉴权的页面都要输入用户名和密码来登录，那就太麻烦了。所以，很多现代的网站都实现了持久登录。我的示例使用cookie简单实现了持久登录。

在处理/login路径上的POST请求时，如果登录成功，就把用户名、一个hash值、还有上次登录时间保存在cookie里，并且设置cookie的有效期为60秒。这样在60秒有效期内，浏览器后续的访问就会带cookie，服务端代码从cookie里验证用户名和hash值，让用户保持登录状态。当过了60秒，浏览器就不再发送cookie，服务端就认为需要重新登录，将用户重定向到login页面。

现在服务端的用户信息就简单的放在js代码里了，非常丑陋，下次我们引入MongoDB，把用户信息放在数据库里。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Node.js Express安装与使用步骤详解

table表格内对某列内容进行搜索筛选步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!