리다이렉션과 동적 경로 생성하기

리다이렉트란?

리다이렉트(Redirect)는 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻한다. 예를 들어, 로그인 하지 않은 유저가 로그인이 필요한 페이지에 접속하려고 했을 때, 로그인 페이지로 리다이렉트를 걸어줄 수 있는 것이다.

리다이렉션 URL 생성하기

사용자를 로그인 페이지로 리다이렉션할 때, 로그인 후에 다시 원래 위치로 돌아갈 수 있도록 현재 페이지 URL 또는 주어진 URL을 쿼리 매개변수로 포함시킨다.

//getDynamicPath 내의 login 함수
login: (redirect?: string) => {
  const currentRedirect = redirect ?? window.location.href;
  return `${RouterPath.login}?redirect=${encodeURIComponent(currentRedirect)}`;
},

• redirect 매개변수가 전달되면 그 값을 사용하고, 그렇지 않으면 window.location.href 값을 사용한다.
• RouterPath.login을 기반으로 로그인 페이지 URL을 생성한다.
• ?redirect= 뒤에 currentRedirect 값을 URL 인코딩하여 붙인다.
• encodeURIComponent()는 다음 문자를 제외한 문자를 이스케이프 한다.URL에 포함될 수 없는 문자를 이스케이프 처리하여 안전한 URL을 만든다. 참고
• Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( )

dynamic Path와 기본 Path를 사용할 때의 차이점

❗리다이렉션 URL에 현재 위치 정보 포함 여부가 달라진다.

• getDynamicPath.login()을 사용하는 경우:
  • 로그인 페이지로 이동할 때 현재 페이지의 URL을 redirect 쿼리 매개변수로 포함시킨다.
  • 예를 들어, 현재 페이지가 https://example.com/abc라면, navigate(getDynamicPath.login())는 '/login?redirect=인코딩된경로'로 이동한다.
  • 로그인 후 사용자를 원래 위치로 되돌리기 위해 유용하다.
• 단순히 '/login'을 사용하는 경우:
  • 로그인 페이지로 이동할 때 현재 페이지의 URL 정보를 포함시키지 않는다. navigate('/login')은 그냥 '/login'으로 이동한다.
  • 로그인 후 사용자가 원래 위치로 돌아올 필요가 없는 경우나 현재 위치 정보가 필요 없는 경우에 적합하다.

인증 정보에 따라 로그인 페이지로 리다이렉션 하기

우선, useAuth에서 인증 정보를 가져오고 인증 여부에 따라 true/false를 반환하는 함수를 작성했다.

 const authInfo = useAuth();
 const navigate = useNavigate();

const isAuthenticated = (): boolean => {
    return !!authInfo; // 인증된 경우 true, 그렇지 않은 경우 false 반환
};

그리고 로그인 페이지로 리다이렉트 하는 함수까지 작성해주자.

 const redirectToLoginPage = (): void => {
    navigate(getDynamicPath.login());
  };

useAuthUtils는 인증 여부와 로그인 페이지로 리다이렉트 하는 함수를 반환한다.

export const useAuthUtils = () => {
  const authInfo = useAuth();
  const navigate = useNavigate();

  const isAuthenticated = (): boolean => {
    return !!authInfo; // 인증된 경우 true, 그렇지 않은 경우 false 반환
  };

  const redirectToLoginPage = (): void => {
    navigate(getDynamicPath.login());
  };

  return { isAuthenticated, redirectToLoginPage };
};

이제 useAuthUtils에서 반환하는 값들을 사용해서 사용자가 로그인이 되었으면 true를 반환하고, 그렇지 않은 경우에는 로그인 페이지로 리다이렉션 하는 함수를 작성해보자.

함수를 사용할 때 함수에서 반환되는 값이 존재하고, 해당 값을 사용할 때만 return을 사용하는 것이 좋다는 것을 유의하면서 작성해보자!

 

checkAuthAndRedirect 는 인증된 경우 true를, 그렇지 않은 경우에는 false를 반환한다.

인증이 되지 않으면 window.confirm으로 alert해주고, 사용자가 ‘확인’을 누르면 로그인페이지로 리다이렉트 하도록 했다.

if (!isAuthenticated()) {
  const isConfirm = window.confirm(
    '로그인이 필요한 메뉴입니다.\n로그인 페이지로 이동하시겠습니까?',
  );

  if (isConfirm) {
    redirectToLoginPage();
    return false;
  }
}

전체 코드

export const useRedirectToLoginByAuth = () => {
  const { isAuthenticated, redirectToLoginPage } = useAuthUtils();

  const checkAuthAndRedirect = (): boolean => {
    if (!isAuthenticated()) {
      const isConfirm = window.confirm(
        '로그인이 필요한 메뉴입니다.\n로그인 페이지로 이동하시겠습니까?',
      );

      if (isConfirm) {
        redirectToLoginPage();
        return false;
      }
    }
    return true; //인증된 경우 true
  };

  return checkAuthAndRedirect;
};

사용 예시

 const handleWishItem = () => {
    if (!checkAuthAndRedirect()) return;
    const currentWishList: WishList = wishListSessionStorage.get() || [];

    if (isProductInWishList(currentWishList)) {
      alert('이미 위시리스트에 등록된 상품입니다.');
    } else {
      addProductToWishList(currentWishList);
    }
  };