·UserStorage 파일을 만들어 사용자 정보를 따로 관리

1) src 폴더 아래에 models 폴더 생성 > models 폴더 안에 UserStorage.js 파일 생성

// UserStorage.js

"use strict";

class UserStorage{

  // 사용자 정보를 객체로 보관
  // static(정적 변수)로 선언하여 controller에서 클래스를 인스턴스화하지 않고 바로 users변수에 접근가능하도록 함
  // #users처럼 변수 앞에 #을 붙여 public 변수에서 private 변수로 선언하여 외부 파일에서 함부로 불러올 수 없도록 함
  static #users = {
    id: ["사용자1", "사용자2", "사용자3"],
    pw: ["1234", "3456", "5678"],
    name: ["이름1", "이름2", "이름3"]
  };


  // users 변수를 private로 선언하여 불러올 수 없게 한 것을 로그인 확인을 위하여 불러와야 할 때 불러올 수 있도록 함
  static getUsers(...fields) {
    const users = this.#users;                                                 // 위의 users 객체를 this를 통해 복사
    const newUsers = fields.reduce((newUsers, field) => {       // users 객체의 각 변수에 대해
      if (users.hasOwnProperty(field)) {                                   // users 객체에 존재하는 변수에 대해
        newUsers[field] = users[field];                                     // newUsers 객체에 똑같은 변수를 복사
      }
      return newUsers;
    }, {})										  // users를 복사한 newUsers를 객체 형태로 반환
    return newUsers;
  }
  
  
  // 로그인 페이지에서 입력받은 id에 따라 알맞은 pw와 name 반환하기
  ststic getUserInfo(id) {							    // id를 인자로 넘겨 받아(로그인 페이지에서 입력한 id)
    const users = this.#users;
    const idx = users.id.indexOf(id);					    // 인자로 넘겨받은 id의 users 객체 중 id 변수에서의 인덱스를 받아오기 
    const usersKeys = Object.keys(users);                                // users 객체의 key(변수 이름) 가져오기
    const userInfo = userKeys.reduce((newUser, info) => {        // 각 변수의 이름에 대해
      newUser[info] = users[info][idx];                                     // 각 변수의 이름별 인덱스(id의 인덱스, pw의 인덱스 등)을 받음
      return newUsers;
    }, {});                                   // 로그인 페이지에서 입력받은 id를  users 객체의 id 변수에서 찾아 같은 인덱스의 pw, 같은 인덱스의 name을 찾아 객체 형태로 반환
    return userInfo;
  }
}

module.exports = UserStorage; // 외부 파일에서도 UserStorage 클래스를 사용할 수 있도록 exports

 

 

2) UserStorage.js 파일을 만든 models 폴더에 User.js 파일을 생성하여 로그인 모델 구현

// User.js

"use strict";

const UserStorage = require("UserStorage");    // 사용자의 정보를 담고 사용자의 id와 pw를 비교해줄 UserStorage 가져오기

class User {
  constructor(body) {       // 생성자 생성(body의 초기값 설정)
    this.body = body;
  }
  
  login() {                     // 로그인 모델 구현
    const body = this.body                                                                  // this.body가 반복적으로 나오므로 짧게 body로 사용하기 위해 선언
    const { id, pw } = UserStorage.getUserInfo(body.id);                       // UserStorage.js 파일에서 getUserInfo 함수에 인자로 id를 주고 그 id에 해당하는 id와 pw를 객체 형태로 받기
    if (id) {                                                                                         // 그 id가 사용자 정보에 존재한다면
      if (id === body.id && pw === body.pw) {                                    // 그리고 그 id가 로그인 페이지에서 받은 id와 일치하고 pw가 로그인 페이지에서 받은 pw와 일치한다면
        return {success: true};                                                             // {success: true}를 객체로 return
      }
      return {success: false, msg: "비밀번호가 틀렸습니다."};                  // 만약 id는 존재하지만 pw가 틀렸다면 success는 false로, 메세지와 함께 반환 
    }
    return {success: false, msg: "존재하지 않는 아이디입니다."};             // 만약 id가 존재조차하지 않는다면 success는 false로, 메세지와 함께 반환
  }
}

module.exports = User;

 

 

3) Controller(home.ctrl.js)파일에서 로그인 프로세스를 새로 만든 User 클래스를 사용해 바꿔주기

// home.ctrl.js

// 기존 const process에서 아래의 코드로 변경
const process = {
  login: (req, res) => {
    const user = new User(req.body);     // 로그인 페이지에서 로그인 요청과 함께 받은 body(id와 pw)를 User 클래스에 초기값으로 전달
    const response = user.login();          // User클래스의 login 함수 실행하여 id와 pw 일치여부 확인 및 반응
    consoel.log(response);                    // id와 pw에 따른 반응결과를 console에 출력(success 여부 및 메세지)
    return res.json(response);              // json 형태로 반환(페이지에 경고창으로 띄우기 등)
  },
};

 

 

4) 결과

 -입력한 id가 사용자 정보에 없을 때

 

 -입력한 id는 사용자 정보에 있지만 pw가 일치하지 않을 때

 

 -id와 pw가 일치할 때(login.js 파일에서 로그인 성공 시(res.success가 ture일 시) "/"경로로 이동하도록 지정해 놓았으므로 로그인 성공 시 "/" 경로로 이동

+ Recent posts