로그인 페이지 만들기 - 03

fs 모듈을 활용해 로그인 인증 기능을 구현해보자.

---

fs 모듈

fs 모듈은 파일 처리와 관련된 작업을 하는 모듈로 FileSystem을 줄여서 fs 모듈이라고 말합니다.

• 설치

  npm i fs
  

---

users 파일 작성

databases 폴더를 만들고 users.json 파일을 만듭니다.

해당 파일은 사용자 정보를 관리하는 파일로 데이터 베이스 역할을 합니다.

{
  "id": ["123", "1234", "12345"],
  "password": ["123", "1234", "12345"],
  "name": ["가", "나", "다"]
}

---

Model 작성

models 폴더에 model_fs.js 파일을 만듭니다.

먼저, 로그인 기능으로 사용자가 보낸 id 값을 통해 id, password를 비교해 로그인 기능을 구현해보겠습니다.

fs.promises 는 promise를 사용해 fs 메서드를 동기 처리합니다.

readFile 메서드는 인수로 들어온 파일을 읽어옵니다.

promise로 반환되므로 then 메서드로 데이터를 반환하고 catch 메서드로 에러를 처리합니다.

// fs.promises 를 import해 사용합니다.
import { promises as fs } from "fs";

class UserStorage {
  static getUserInfo(id) {
    return fs
      .readFile("./src/databases/users.json")
      .then((data) => {
        // fs 모듈의 readFile 메서드로 읽어온 데이터를 객체화합니다.
        const users = JSON.parse(data);

        // 사용자가 보낸 id를 찾아 index 값을 저장합니다.
        const idx = users.id.indexOf(id);

        // 반환할 객체의 key 값들을 저장합니다.
        const usersKeys = Object.keys(users); // id, password, name

        // 새로운 객체를 만들어 사용자 정보를 저장합니다.
        const userInfo = {};
        for (let key of usersKeys) {
          userInfo[key] = users[key][idx];
        }

        // 사용자 정보를 반환합니다.
        return userInfo;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

export default UserStorage;

---

Controller 작성

작성한 Model 파일을 Controller에 import합니다.

사용자가 입력한 id와 일치하는 사용자 정보가 있는지 확인합니다.

import UserStorage from "../models/model_fs.js";

const output = {
  login: (req, res) => {
    res.render("user/login");
  },

  register: (req, res) => {
    res.render("user/register");
  },
};

const process = {
  login: async (req, res) => {
    try {
      // req.body로 넘어온 사용자가 보낸 id로 사용자 정보를 받아옵니다.
      const user = await UserStorage.getUserInfo(req.body.id);

      var response = {};

      // 사용자의 입력 정보에 따라 로그인 성공, 비밀번호 불일치, 아이디 존재 X 등 기능을 처리하겠습니다.
      if (user) {
        if (password === req.body.password) {
          // id와, password 가 일치
          response = { success: true };
        } else {
          // 비밀번호 불일치
          response = { success: false, msg: "비밀번호가 틀렸습니다." };
        }
      } else {
        // 아이디 존재 X
        response = { success: false, msg: "존재하지 않는 아이디입니다." };
      }

      res.json(response);
    } catch (err) {
      // 에러 발생
      return { success: false, msg: "에러 발생" };
    }
  },

  register: (req, res) => {
    res.send("회원가입 완료");
  },
};

export default { output, process };

---

Js 파일 수정

서버로부터 받은 정보에 따른 처리를 작성합니다.

//login.js
"use strict";

const id = document.querySelector("#id"),
  password = document.querySelector("#password"),
  loginBtn = document.querySelector("#button");

loginBtn.addEventListener("click", login);

async function login() {
  if (!id.value) return alert("아이디를 입력해주세요.");
  if (!password.value) return alert("비밀번호를 입력해주세요.");

  const req = {
    id: id.value,
    password: password.value,
  };

  try {
    const res = await axios({
      url: "/user/login",
      method: "post",
      data: req,
    });

    if (res.data.success) {
      alert("로그인 성공");
    } else {
      // 로그인 실패 시 msg를 알림창에 띄웁니다.
      alert(res.data.msg);
    }
  } catch (err) {
    // 에러 처리
    alert(res.data.msg);
  }
}

---

결론

다음 포스트에선 AWS RDS를 연동해 데이터 베이스를 이용해 사용자 정보를 관리해보겠습니다.

또한 로그인, 회원가입, 로그아웃 기능을 구현해보겠습니다.