로그인 이후의 관리 방식

UpLog의 로그인 이후의 방식 설계

1. 로그인을 한다.
2. 세션 스토리지에 userInfo가 암호화되어 저장된다.
3. 제품(products) 목록을 가져온다.
   • 제품이 있는 경우
     • 제품 리스트의 맨 처음 제품 ReleaseNote 페이지로 이동한다.
   • 제품이 없는 경우
     • 메인 페이지로 이동한다.

로그인 이후의 방식 구현

로그인 후 세션 스토리지에 유저 정보 저장

-로그인 로직

  const { mutate } = useMutation(loginAPI, {
    onSuccess: (data: GetUserInfo | FailResponse) => {
      if ('message' in data) {
        setMessageInfo({ type: 'error', content: '아이디 또는 비밀번호를 잘못 입력하셨습니다.' });
        return;
      }

      const { id, email, nickname, name, position, image } = data;
      const userInfo: UserInfo = {
        id,
        nickname,
        name,
        position,
        email,
        image,
      };

      sessionStorage.setItem('userInfo', encrypt(JSON.stringify(userInfo)));
      setUserInfo(userInfo);
      navigate('/workspace/-1');
    },
    onError: () => {
      setMessageInfo({ type: 'error', content: '잠시후에 다시 시도해주세요.' });
    },
  });

• 로그인에 성공하면 유저 정보가 넘어오고 이 정보를 encrypt로 암호화하여 세션 스토리지에 저장한다.
• 그리고 id가 -1인 제품은 없기에 임시로 "/workspace/-1" 경로로 보내준다.

-encrypt, decrypt

import CryptoJS from 'crypto-js';

/* Salt 비밀 키 */
const salt = import.meta.env.VITE_SALT;

/* 암호화 */
export const encrypt = (text: string) => {
  // 값이 없을 경우 빈 문자열 반환
  if (!text) return '';
  return CryptoJS.AES.encrypt(text, salt).toString();
};

/* 복호화 */
export const decrypt = (text: string) => {
  // 값이 없을 경우 빈 문자열 반환
  if (!text) return '';

  try {
    const bytes = CryptoJS.AES.decrypt(text, salt); // 복호화 시도
    return bytes.toString(CryptoJS.enc.Utf8);
  } catch (error) {
    return ''; // 에러 발생 시 빈 문자열 반환
  }
};

• 아래 코드처럼 crypto-js를 이용하여 암호화, 복호화를 했다.
• userInfo가 조작되면 복호화 시, 빈 배열이 retrun 된다.

로그인되었는지 여부

• userInfo가 세션 스토리지에 저장되어 있다면 로그인된 것이다.
• 하지만 userInfo를 decrypt(복호화) 했을 때 빈 배열이 오면 자동 로그아웃된다.

"/workspace/-1"에서 처리 방식

1. 우선 "/workspace" 경로에 오면 내가 속해있는 제품 리스트 목록을 서버로부터 가져온다.
2. 제품 리스트 개수를 체크

  // 로그인 페이지에서 넘어왔을 경우
  useLayoutEffect(() => {
    if (isFetching) return;

    if (product === '-1' && productList && productList.length > 0) {
      sessionStorage.setItem('nowProduct', JSON.stringify(productList[0]));
      navigate(`/workspace/${productList[0].productId}`);
    } else if (product === '-1' && productList && productList.length === 0) {
      navigate('/');
    }
  }, [product, productList, isFetching]);

• 제품이 있는 경우
  • 제품 리스트의 첫 번째 제품 정보를 세션 스토리지에 기록
  • 첫번째 제품의 릴리즈 노트 페이지로 이동

제품이 있는 경우

• 제품이 없는 경우 
  • 메인 페이지로 이동

제품이 없는 경우