[Node] 로그인 체크 쿠키 세팅및 로그인 상태 표시 완료

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "axios": "^1.3.4",
+    "cookie-parser": "^1.4.6",
     "ejs": "^3.1.8",
     "express": "^4.18.2",
     "express-handlebars": "^6.0.7",

public/js/login.js

@@ -1,4 +1,4 @@
-// import axios from '/node_modules/axios'
+// import axios from 'axios';
 
 class Login {
     constructor() {
@@ -12,27 +12,39 @@ class Login {
             const formUserPassword = document.querySelector('#formUserPassword');
 
             function setLoginData(cookieValues) {
-                for(const keyValue of cookieValues) {
+                for (const keyValue of cookieValues) {
                     Object.entries(keyValue).map(([key, value]) => {
                         const date = new Date();
                         date.setDate(date.getDate() + (24 * 60 * 60 * 1000));
                         document.cookie = `${key}=${value};expires=${date.toUTCString()}`;
-                        return [key,value];
+                        return [key, value];
                     });
                 }
             }
 
             loginBtn.addEventListener('click', () => {
                 const userName = formUserName.value;
                 const userPassword = formUserPassword.value;
-                console.log('name = ', userName);
-                console.log('password = ', userPassword);
-                if (userName === 'tedjin' && userPassword === 'tedjinS30%^') {
-                    setLoginData([{userName: userName},{userPassword: userPassword}, {isLogined: true}]);
-                }
+
+                axios.post('gologin', {
+                    userName: userName,
+                    userPassword: userPassword
+                }, {
+                    headers: {
+                        'Content-type': 'application/json'
+                    }
+                }).then((res) => {
+                    const {value} = res.data;
+                    if (value) {
+                        location.href='/';
+                    }
+                }).catch(e => {
+
+                })
             })
         }
     }
 }
 
+
 export default new Login()

public/js/main.js

@@ -13,19 +13,24 @@ window.onload = function () {
     // now.setTime(now.getTime() + 24 * 60 * 60 * 1000);
     // const expired = `expires=${now.toUTCString()}`;
     // document.cookie = `${loginValue};${expired}`;
-    const nameValue = getCookieByKey('cookie_name811');
-    console.log('nameValue = ', nameValue)
+    const isLogined = Boolean(getCookieByKey('isLogined'));
+    const login = document.querySelector('#login');
+    if (isLogined) {
+        login.innerHTML = '로그아웃';
+
+    } else {
+        login.innerHTML = '로그인';
+    }
 
 }
 
 function getCookieByKey(cookieKey) {
     const cookieList = document.cookie.split(';').map(cookie => cookie.trim());
-    console.log('on');
     for(const cookie of cookieList) {
         const [key, v] = cookie.split('=');
         if (key === cookieKey) {
             return v;
         }
     }
     return undefined;
-}
+}

src/app.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const bodyParser = require('body-parser');
+const cookieParser = require('cookie-parser');
 const {publicDir, rootDir} = require('./utils/path');
 const {routerAdmin} = require('./routes/admin');
 const routerShop = require('./routes/shop');
@@ -10,7 +11,9 @@ const app = express();
 app.set('view engine', 'pug');
 app.set('views', path.join(rootDir, 'views'));
 
-app.use(bodyParser.urlencoded({extended: false}));
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+app.use(cookieParser())
 app.use(express.static(publicDir));
 app.use('/admin', routerAdmin);
 app.use(routerShop);

src/routes/shop.js

@@ -5,22 +5,35 @@ const {products} = require('./admin');
 const router = express.Router();
 
 router.get('/', (req, res, next) => {
-    // console.log('from shop = ', products);
-    // res.sendFile(path.join(rootDir, 'views', 'shop.html'));
     res.render('shop');
 });
 router.get('/login', (req, res, next) => {
-    res.render('login');
+    const {isLogined} = req.cookies;
+    if (isLogined) {
+        res.status(301).cookie('isLogined', false, {maxAge: 0})
+        res.redirect(path.resolve(__dirname, '/'));
+    } else {
+        res.render('login');
+    }
+
 })
 router.post('/gologin', (req, res, next) => {
     const userName = req.body.userName;
     const userPassword = req.body.userPassword
-    if (userName === 'tedjin' && userPassword === 'tedjinS30%^') {
-        res.status(200).send({
-            message: 'Login Success'
+    const date = new Date();
+    date.setDate(date.getDate() + (24 * 60 * 60 * 1000));
+    if (userName === '1' && userPassword === '2') {
+        res.status(200).cookie('isLogined', true, {expires: date}).send({
+            message: 'Login Success',
+            value: {
+                isLogined: true
+            }
         })
+
     } else {
-        res.status(402).send({
+        res.status(401).cookie(
+            'isLogined', false
+        ).send({
             message: 'Login Fail'
         })
     }

src/views/login.pug

@@ -16,6 +16,6 @@ html
             h1 로그인 하세요
                 input#formUserName(type='text', placeholder='User Name', required='true', name='userName')
                 input#formUserPassword(type='password', placeholder='password', required='true' name='userPassword')
-                button#login-button(type='submit') 로그인
+                button#login-button(type='button') 로그인
         script(src='https://unpkg.com/axios/dist/axios.min.js', type='text/javascript')
         script(src='js/login.js', type='module')

src/views/shop.pug

@@ -12,7 +12,7 @@ html
                     li.main-header__item
                         a(href='/admin/add-product') Add Product
                     li.main-header__item
-                        a(href='/login') Login
+                        a(href='/login', id='login') Login
         main
             h1 상품들 퍼그
             p 모든 상품 목록