청소 플랫폼 만들기 (19)

김민준·2023년 9월 6일

TIL node.js 자바스크립트

TIL-----------------------------내림차순↓

목록 보기

64/111

청소 플랫폼 만들기 (19)
└로그인 로그아웃 기능 수정
└로그인 안된 상황의 예외처리
└모듈로 불러올때의 에러

공부하며 느낀 점
참조한 페이지

청소 플랫폼 만들기 (19)

로그인 로그아웃 기능 수정

기존의 방법은 쿠키에 JWT를 저장하고 permission은 세션 스토리지에 저장하였다.
하지만 JWT를 사용해서 서버 부담을 줄인다는 목적에 부합하지 않아서 변경하였다.

원래 쿠키에 넣으려다가 세션 스토리지에 넣은 이유는 JWT로 암호화한 permission을 읽을 수 없기 때문이었다.

그냥 쿠키 값을 두개 넣는걸로 해결했다..,.
역시 머리 안돌아가면 그냥 자고 일어나야한다.

로그아웃 할때 쿠키 제거가 이상하게 되는 일이 있었따.

function removeBearerTokenCookie() {
  const cookies = document.cookie.split(';');
  console.log(cookies);
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith('Authorization=Bearer')) {
      document.cookie = 'Authorization=; expires=Thu, 01 Jan 2000 00:00:00 UTC; path=/;';
    }
    if (cookie.startsWith('permission')) {
      document.cookie = 'permission=; expires=Thu, 01 Jan 2000 00:00:00 UTC;';
    }
  }
}

별건 아니고 원래 Authorization 만 삭제해서 if문안에 return이 있어서였다. 조금 비효율적으로 삭제한 다음에도 계속 찾겠지만 쿠키가 엄청 큰게 아니니까 따로 예외처리를 만들 필요는 없어보인다.

참고로 document.cookie = 다음의 부분은, 선택할 쿠키의 키, 만료일 , 쿠키를 사용할 경로라고한다.

즉 document.cookie = 'permission=; 같은 식으로 작성하면 값이 없는 쿠키가 남게되고, 어짜피 특정 경로가 아니라 모든 경로에서 지울거니까 path=/;를 달아야 할 것같다.
(현재까지 만들어 둔 코드에서는 /경로에서 로그아웃을 해도, /myCompany 경로에서도 똑같이 삭제되었다.)

모듈로 불러올때의 에러

import { getCookie } from './functions.js';

//  cookie 에 사장이 아니면 경고문을 띄우고 메인으로 리디렉션한다.
document.addEventListener('DOMContentLoaded', function () {
  const isOwner = getCookie('permission');

  if (isOwner !== 'owner') {
    alert('권한이 부족합니다!\n메인 페이지로 이동합니다.');
    window.location.href = '/';
  }
});

로그인 된 사람이 owner 가 아니면 메인으로 리디렉션을 시켰따.

import { getCookie } from './functions.js';는 같은 함수를 여러 js파일에서 쓰기 때문에 모듈로 불러온 것이다.

    <script src='../template/js/user.js'></script>
    <script type="module" src='../template/js/user.module.js'></script>

위와같이 module로 불러올때는 type="module"를 별도로 붙여야한다.

.js파일을 분리한 것을 보면 알겠지만 이렇게하면 문제가 생긴다...

바로 함수가 되지 않는 것이다. 자세히 보면 알겠지만 type="module"속성을 먹여두면 async function createCompany() { 이런식으로 함수가 있을때 함수명이 진해지지 않고 버튼에서 함수를 불러오지 못한다.

Uncaught ReferenceError: <함수명> is not defined at HTMLButtonElement.onclick

정확히는 onclick은 물론 이벤트 리스너로 불러오는 방식
document .querySelector('.btn.btn-primary[data-target="#createCompany"]') .addEventListener('click', createCompany);
모두 안먹히고, 버튼에서의 함수명과 정의된 함수명이 같아도 마치 함수명이 맞지 않는 것처럼 불러오지 못한다.

해결법을 찾지는 못해서 .js 파일을 분리하였다.

공부하며 느낀 점

튜터님은 permission 도 JWT로 암호화하길 추천하는데 그렇게하면 내가 프론트에서 이걸 어떻게 다뤄야하는지 몰라서 암호화 없이 쿠키에 넣었다.
어짜피, 쿠키에서 권한을 조작해도, 자신의 업체의 목록을 조회하고, 생성등을 하기위에서는 서버단에서 userId도 참조해야하기 때문에 문제 없다고 판단된다.
userId는 JWT로 암호화 되어 있기때문에 서버에서 JWT 검증 과정에서 걸러질 것이다.
문제의 원인이 구글에서 gpt4에서도 진단이 안될 때도 있다.
이전 블로그 기록에서도 알 수 없고, gpt도 감을 못잡는다면 그냥 자기 감을 믿고 질러버리자. 과거에 다른 사람이 한 적이 없는 실수라면, 차라리 내가 한 짓을 되돌아보며 하나하나 짚어보는 게 더 빠르고 정확하다.