최근 express로 블로그를 만드는 뻘짓을 하고 있는데 절때 건들일이 없을거 같은 로그인 페이지에 손댈게 생겼다.
바로 로그인후 리다이렉트할 페이지를 넣는것..!
이렇게 요청을 보내고 여기서 로그인을 마치면 redir인자에 있는 /write 페이지로 이동하는 식이다.
그런데 문제가 하나있다.
로그인 페이지가 html(정확히는 ejs)로만 이루어져 있다.
login.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="/css/login.css" rel="stylesheet">
<link rel="stylesheet" href="/css/darkmode.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<%- include('nav', {login: login}) %>
<div id="loginForm">
<h3>로그인</h3>
<p>블로그 운영자 확인용 로그인입니다.</p>
<% if(wrong) { %>
<p style="color: red; font-size: 10px;">아이디 혹은 비밀번호를 잘못 입력했습니다.</p>
<% } %>
<form action="/login" method="POST">
<table>
<tr>
<td>ID : </td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>PW : </td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit" value="로그인"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
login.js
router.post('/', function(req, res, next) {
var body = req.body;
var inputpass = crypto.createHash("sha512").update(body.password).digest("hex");
if(body.id == 'id' && inputpass == 'sha512 hash pw') {
req.session.userinfo = body.id;
req.session.isLogin = true;
res.redirect('/');
}else{
res.render('login', {wrong: true, login: req.session.isLogin});
}
});form태그는 action에 있는 주소에 method에 있는 방법으로 페이지를 요청해 이동시키기에 별도의 js를 쓰지 않는 이상 form안에 input으로만 인자를 넘겨줘야 한다.
(예시로 태그가<form action="/test" method="GET"><input type="text" name="id"></form>이면 tistory.com/login?id=(input value)로 get요청을 보내는 것이다.)
이때 XHR로 요청을 보내게 만들었어야 하는데 블로그를 만들기로 마음 먹고 로그인 폼을 만들때만 해도 웹 개발 지식을 거의 몰랐기에 그냥 프론트 엔드에서 login으로 리다이액션만 하게 해놓고 백엔드에서 리다이렉트을 시켰다..
따라서 저 form에서 리다이렉트를 시킬 웹 주소를 넘겨줘야 한다.
방법은 쉽다. html코드에 숨겨진 input를 만든 후, 거기다가 리다이렉트할 주소를 넣어주면 된다.
login.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="/css/login.css" rel="stylesheet">
<link rel="stylesheet" href="/css/darkmode.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<%- include('nav', {login: login}) %>
<div id="loginForm">
<h3>로그인</h3>
<p>블로그 운영자 확인용 로그인입니다.</p>
<% if(wrong) { %>
<p style="color: red; font-size: 10px;">아이디 혹은 비밀번호를 잘못 입력했습니다.</p>
<% } %>
<form action="/login" method="POST">
<input type="text" name="redir" style="display: none;" value="<%=redir%>"/>
<table>
<tr>
<td>ID : </td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>PW : </td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit" value="로그인"></td>
</tr>
</table>
</form>
</div>
</body>
</html>login.js
var createError = require('http-errors');
var express = require('express');
var router = express.Router();
var crypto = require('crypto');
/* GET login page. */
router.get('/', function(req, res, next) {
res.render('login', {wrong:false, login: req.session.isLogin, redir: (req.query.redir ? req.query.redir : '')});
});
router.post('/', function(req, res, next) {
var body = req.body;
var inputpass = crypto.createHash("sha512").update(body.password).digest("hex");
if(body.id == 'id' && inputpass == 'sha512 hash pw') {
req.session.userinfo = body.id;
req.session.isLogin = true;
res.redirect((req.body.redir ? req.body.redir : '/'));
}else{
res.render('login', {wrong: true, login: req.session.isLogin, redir: (req.query.redir ? req.query.redir : '')});
}
});
module.exports = router;
이제 로그인을 하면 redir에 들어간 주소로 정상적으로 이동이 된다 :)
'코딩 스래기' 카테고리의 다른 글
| 마훅 - 마후마후 트윗 번역 웹훅 제작기 (0) | 2025.01.20 |
|---|---|
| [Web] NodeJS로 웹 푸시알림 구현하기 (0) | 2024.04.03 |
| [Android] Intent로 웹페이지를 열면 웹뷰 충돌이 발생할때 (0) | 2024.04.03 |
| [Python] win32api 모듈을 사용한 코드를 exe로 변환시 'win32api : 지정된 모듈을 찾을수 없습니다.' (0) | 2020.03.09 |
