집 > 기사 > 웹 프론트엔드 > Express Session은 로그인 인증 기능을 구현합니다. (코드 첨부)

Express Session은 로그인 인증 기능을 구현합니다. (코드 첨부)

php中世界最好的语言원래의: 2018-04-18 11:08:361913검색

이번에는 로그인 인증 기능(코드 포함)을 구현하기 위한 Express Session을 가져왔습니다. Express Session에서 로그인 인증 기능을 구현하기 위한 주의사항은 무엇인가요?

많은 사람들이 Express와 Session을 사용하여 로그인 확인을 구현하는 방법을 알아보고 있습니다. 이 글에서는 Express와 Session을 사용하여 로그인 확인을 구현하는 방법을 간략하게 소개합니다. 함께 알아봅시다.

1. 앞에 쓴다

웹사이트에 로그인하면 로그아웃하지 않고 웹사이트를 닫습니다. 잠시 후 웹사이트를 다시 열면 여전히 로그인되어 있습니다. 이는 우리가 웹 사이트에 로그인할 때 서버가 로그아웃하거나 저장된 로그인 상태가 만료될 때까지 로그인 상태를 저장하기 때문입니다. 그렇다면 서버는 로그인 상태를 어떻게 저장합니까? 그 답은 세션입니다. 이를 통해 서비스는 각 클라이언트 연결 상태를 기록할 수 있습니다. 여기서는 Session의 원리에 대해 자세히 설명하지 않겠습니다. 이 글에서는 주로 Express 프레임워크에서 Session을 사용하여 사용자 로그인 인증을 구현하는 방법을 소개합니다.

2. 환경 구성

Node 환경에는 Express와 Session을 통합하는 라이브러리가 없으므로 먼저 프로젝트 디렉토리를 입력하여 생성한 후, 다음 명령어를 사용하여 프로젝트 루트 디렉토리에 4개의 모듈을 설치해야 합니다.

1) 익스프레스

이 모듈을 사용하면 웹 개발 프레임워크를 빠르게 구축할 수 있습니다.

2) 본문 파서

이 모듈은 Express 모듈의 미들웨어로, 브라우저에서 보낸 본문 데이터를 구문 분석하는 데 도움이 됩니다.

3) 익스프레스 세션

이 모듈은 또한 클라이언트 세션을 처리하는 데 도움이 되는 Express 모듈 미들웨어이기도 합니다.

4) 이지스

이 모듈은 렌더링 엔진입니다. 배경 변수 data를 첫 페이지에 바인딩하는 것이 편리합니다.

다음과 같이 설치하세요:

npm install express --save
npm install body-parser --save
npm install express-session --save
npm install ejs --save

3. 로그인 및 인증

세션은 서버에서 클라이언트의 상태를 표시할 수 있습니다. 이를 사용하여 클라이언트 측 로그인 확인을 구현할 수 있습니다. 세션 로그인 확인 과정은 대략 다음과 같습니다. 클라이언트가 로그인하지 않은 상태에서 홈페이지를 요청하면 서버는 클라이언트가 로그인한 후 요청을 로그인 페이지로 리디렉션하며, 서버는 클라이언트의 로그인 상태를 기록하고 저장해야 합니다. 다음에 서버가 홈 페이지를 요청할 때 클라이언트의 로그인 상태를 확인할 수 있도록 활동 기간을 제공합니다. 로그인 상태가 유효하면 클라이언트가 필요한 페이지로 직접 돌아가고, 그렇지 않으면 리디렉션됩니다. 로그인 페이지.

세션 만료 시간과 관련하여 세션 만료 시간이 설정되지 않은 경우 서버는 자체 구성의 기본 유효 기간에 따라 오랫동안 서버와 상호 작용하지 않은 세션을 삭제합니다.

예제 코드는 아래에 게시되어 있습니다. 인터페이스는 비교적 간단하고 서버 배경 코드 설명도 명확하게 작성되어 있으므로 다시 설명하지 않겠습니다.

프로젝트의 디렉토리 구조는 다음과 같습니다.

로그인 페이지(login.html) 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
  </style>
</head>
<body>
  <form action="/login" method="POST">
    用户名: <input type="text" name="username"/> <br>
    密码: <input type="password" name="pwd"/>
    <input type="submit" value="Submit"/>
  </form>
</body>
</html>

홈페이지(home.html) 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p>用户名：<span><%= username %> </span> <a href="/logout" rel="external nofollow" >退出登录</a></p>
</body>
</html>

서버(app.js) 코드는 다음과 같습니다.

/**
 * Created by tjm on 9/7/2017.
 */
var express = require('express');
var app = express();
var session = require('express-session');
var bodyparser = require('body-parser');
// 下面三行设置渲染的引擎模板
app.set('views', dirname); //设置模板的目录
app.set('view engine', 'html'); // 设置解析模板文件类型：这里为html文件
app.engine('html', require('ejs').express); // 使用ejs引擎解析html文件中ejs语法
app.use(bodyparser.json()); // 使用bodyparder中间件，
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中间件
app.use(session({
  secret : 'secret', // 对session id 相关的cookie 进行签名
  resave : true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
  },
}));
// 获取登录页面
app.get('/login', function(req, res){
  res.sendFile(dirname + '/login.html')
});
// 用户登录
app.post('/login', function(req, res){
  if(req.body.username == 'admin' && req.body.pwd == 'admin123'){
    req.session.userName = req.body.username; // 登录成功，设置 session
    res.redirect('/');
  }
  else{
    res.json({ret_code : 1, ret_msg : '账号或密码错误'});// 若登录失败，重定向到登录页面
  }
});
// 获取主页
app.get('/', function (req, res) {
  if(req.session.userName){ //判断session 状态，如果有效，则返回主页，否则转到登录页面
    res.render('home',{username : req.session.userName});
  }else{
    res.redirect('login');
  }
})
// 退出
app.get('/logout', function (req, res) {
  req.session.userName = null; // 删除session
  res.redirect('login');
});
app.listen(8000,function () {
  console.log('http://127.0.0.1:8000')
})

이 시점에서 세션 로그인 확인이 완료됩니다. 위의 예에서는 세션이 서비스 메모리에 저장됩니다. 물론 파일이나 데이터베이스에도 저장할 수 있습니다. 세션 미들웨어만 구성하면 됩니다.

app.use(session({
  secret: 'secretkey',
  store: new MongoStore({
    db: 'sessiondb'
  })
}));

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!