TIL localstorage를 이용한 사용자 인증 방식

프로젝트 : 맛집후기 뉴스피드 페이지

로직
회원가입-> 로그인-> CUD기능을 수행하기 위한 사용자 인증

회원가입 부분코드
: 6가지의 정보를 받는다 => 중복되는 닉네임 검사 => 패스워드는 암호화하여 알아보기 어렵게 저장(bcrypt 라이브러리 설치필요) => 성공하면 201번포트로 회원정보 return

module.exports = {
  create: async (req, res, next) => {
    const { nickname, name, email, phone, imageURL, password } = req.body;
    const foundData = await User.findOne({ where: { nickname } });
    if (!foundData) {
      const hashedPassword = bcrypt.hashSync(password, config.bcrypt.salt);

      const created = await User.create({
        nickname,
        password: hashedPassword,
        name,
        email,
        phone,
        imageURL,
      }).then((d) => {
        return d;
      });

      return res.status(201).json(created.toJSON());
    } else {
      return res.status(400).json({
        Success: false,
        message: '이미 존재하는 닉네임 입니다.',
      });
    }
  },
}

로그인 부분 코드
: email과 password를 받아 요청 => 받아온 email과 일치하는 회원정보를 db에서 찾음 => bcrypt로 암호화된 패스워드를 다시 바꿔서 받아온 패스워드와 일치하는지 확인 => 맞약 맞으면 토큰을 생성하여 토큰에 포함될 payload를 userId로 지정하고 설정한 secretKey로 서명해 토큰의 무결성을 검증 => 토큰의 유효기간 지정 => 쿠키를 Authorization, Beraer타입으로 토큰값과 같이 구워 보낸다. => 성공하면 로그인 되었다고 표시

login: async (req, res) => {
    const { email, password } = req.body;
    try {
      const foundData = await User.findOne({ where: { email } });
      const match = bcrypt.compareSync(password, foundData.dataValues.password);

      if (match) {
        const token = await jwt.sign(
          {
            userId: foundData.dataValues.id,
          },
          secretKey,
          { expiresIn: expireIn }
        );
        res.cookie('Authorization', 'Bearer ' + token);
        res.status(200).json({
          token: token,
          message: '로그인 되었습니다.',
        });
      } else {
        res.status(400).json({
          message: '닉네임과 비밀번호가 일치하지 않습니다.',
        });
      }
    } catch (e) {
      console.error(e);
      res.status(400).json({
        message: 'Bad Request',
      });
    }
  },

문제발생: 로그인을 해도 쿠키쪽에 아무런 정보가 들어오지 않음

문제해결: 웹브라우저의 기본 기능인 Local Storage에 저장하여 토큰값을 가져온다
=> 단점은 누구나 볼 수 있고 해킹이 간단할 수 있다는 것이다.

// 로그인
async function login() {
  const obj = {};
  obj.email = $('#loginEmail').val(); // Uniqe
  obj.password = $('#loginPw').val();
  const option = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(obj),
  };

  try {
    const fetchedData = await fetch(
      'http://localhost:3030/users/login',
      option
    ).then((d) => {
      return d.json();
    });
    window.localStorage.setItem('Authorization', 'Bearer ' + fetchedData.token);
    window.location.reload();
  } catch (e) {
    console.error(e);
  }
}

프론트 쪽 index.js에서 서버로부터 작성된 코드를 fetch불러와서 email과 password가 맞으면 해당 정보를 JSON화시켜 localstorage로 저장해서 인증된 값을 이걸로 계속 끌어다 쓰게 된다.