이 글에서는 Express 프레임워크에서 Session을 사용하여 사용자 로그인 인증을 구현하는 방법을 주로 소개합니다. 관심 있는 친구들은 익스프레스 세션 로그인 인증 관련 지식을 살펴보세요
1. 앞에 적었습니다
웹사이트에 로그인하면 잠시 후 로그아웃하지 않고 웹사이트를 닫습니다. 이 웹사이트를 다시 열면 여전히 로그인되어 있습니다. 이는 우리가 웹 사이트에 로그인할 때 서버가 로그아웃하거나 저장된 로그인 상태가 만료될 때까지 로그인 상태를 저장하기 때문입니다. 그렇다면 서버는 로그인 상태를 어떻게 저장합니까? 그 대답은 세션입니다. 이를 통해 서비스는 각 클라이언트 연결 상태를 기록할 수 있습니다. 여기서는 Session의 원리에 대해 많이 언급하지 않겠습니다. 이 기사에서는 Express 프레임워크에서 Session을 사용하여 사용자 로그인 인증을 구현하는 방법을 주로 소개합니다.
2. 환경 구성
Node 환경에는 Express와 Session용 통합 라이브러리가 없으므로 먼저 프로젝트 디렉터리를 생성한 후 프로젝트 루트 디렉터리에 설치해야 합니다. 4개의 모듈을 설치하려면 다음 명령을 사용하십시오.
1) Express
이 모듈을 사용하면 웹 개발 프레임워크를 빠르게 구축할 수 있습니다.
2) body-parser
이 모듈은 Express 모듈의 미들웨어로, 브라우저에서 보낸 본문 데이터를 쉽게 구문 분석할 수 있습니다.
3) express-session
이 모듈은 클라이언트 세션 처리를 용이하게 하는 Express 모듈 미들웨어이기도 합니다.
4) ejs
이 모듈은 렌더링 엔진입니다. 배경 변수 데이터를 첫 페이지에 바인딩하는 것이 편리합니다.
설치는 다음과 같습니다.
npm install express --save npm install body-parser --save npm install express-session --save npm install ejs --save
3. 로그인 및 인증
Session은 서버에서 클라이언트의 상태를 표시할 수 있습니다. 이를 사용하여 클라이언트 측 로그인 확인을 구현할 수 있습니다. 세션 로그인 확인 과정은 대략 다음과 같습니다. 클라이언트가 로그인하지 않은 상태에서 홈페이지를 요청하면 서버는 클라이언트가 로그인한 후 요청을 로그인 페이지로 리디렉션하며, 서버는 클라이언트의 로그인 상태를 기록하고 저장해야 합니다. 다음에 서버가 홈 페이지를 요청할 때 클라이언트의 로그인 상태를 확인할 수 있도록 활동 기간을 제공합니다. 로그인 상태가 유효하면 클라이언트가 필요한 페이지로 직접 돌아가고, 그렇지 않으면 리디렉션됩니다. 로그인 페이지.
세션 만료 시간의 경우 세션 만료 시간이 설정되지 않은 경우 서버는 자체 구성의 기본 유효 기간에 따라 오랫동안 서버와 상호 작용하지 않은 세션을 삭제합니다.
아래 예시코드를 올려두었습니다. 인터페이스도 비교적 간단하고, 서버 배경코드 설명도 명확하게 적혀있어서 다시 설명하지 않겠습니다.
프로젝트 디렉토리 구조는 다음과 같습니다.
로그인 페이지(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'
})
}));위 코드는 세션을 MongoDB 데이터베이스에 저장합니다. 물론 세션에 대한 몇 가지 구성이 있습니다.
https://www.npmjs.com/package/express-session
위 내용은 Express 프레임워크에서 세션을 사용하여 로그인 시 인증 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
