2024-12-26 TIL

오늘의 작업

1. html 동적 작업 확인

로그인, 회원가입 부분을 기존에는 insomnia를 통해 작업했기에 몰랐으나, 직접 rest API 등을 맞춰서 보내는 것은 까다로운 것이었다.
회원가입은 큰 문제가 없었지만 문제는 로그인 후 토큰을 저장하는 일이었다. 기존의 방식은 login.html에서 토큰을 발급 받고 이 토큰을 계속 굴리는 것인데, login.html의 쿠키에 등록한 토큰은 index.html로 넘어가면 사용할 수 없었다.
그럼 쿠키에 등록하지 않고 다른 곳에 저장해야 한다는 것인데, 세션처럼 서버에서 등록을 하는 방법과 localstorage 둘 중 뭐가 좋을까 고민하다 localstorage를 선택했다. 보안 관점에선 서버에서 처리하는 것보단 약할 수 있으나 서버에서 매번 연결 체크를 하는 것보다는 부하가 적게 걸릴 것이란 이유다.

document.getElementById("login").addEventListener("click", async () => {
        //username : id라 생각하자.
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        /* 
          로그인 API 호출 후 로그인 성공 시 index.html로 이동시켜주세요!
          이 때, 엑세스 토큰은 어딘가에 저장을 해놔야겠죠?! 
        */

        const register = await fetch("http://localhost:3017/api/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, password }),
        });

        //alert("클릭함");

        if (register.ok) {
          const token = getCookie('authorization');
          const now = new Date();
          const item = {
            token : token,
            expired : now + 60
          }

          //console.log(item);
          localStorage.setItem('authorization', JSON.stringify(item));
          //console.log('token : ', token);
          const check = JSON.parse(localStorage.getItem("authorization"));
          //alert(check['token']);
          alert(check['token'])
          window.location.href = "index.html";
        } else {
          alert(register.message);
        }
      });

이후 데이터 만료 등을 잘 처리하도록 해보자.