HOC Auth 인증 체크

페이지 중 메인페이지는 로그인한 회원만 진입이 가능한 페이지고, 로그인 페이지와 회원가입 페이지는 로그인한 회원은 진입하지 못하는 페이지 이다.

그러나 지금은 URL을 통한 접근 시 로그인 하지 않아도 접속이 가능하다.

인증 기능을 추가하여 해당 문제를 해결해보자 !

이런 경우 higher-order component function을 사용해 인증을 처리할 수 있다.

🌻 Auth (HOC)

---

• higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다.
• 서버에 응답받은 유저의 상태 정보(로그인 되어있는지, 로그인 되어있지 않은지)에 따라 Auth function에 인자값을 다르게 줌으로써 페이지들의 인증을 컨트롤할 수 있다.
  
  

🌻 구현 코드

---

• src/hoc/auth.js에 아래와 같이 파일을 만든다.

import React, {useEffect} from 'react';
import { useSelector } from 'react-redux';
import {getAuth, onAuthStateChanged} from "firebase/auth"
import { useNavigate } from 'react-router-dom';
import { useDispatch} from 'react-redux';
import { authUser } from '../_redux/user';
export default function (SpecificComponent, option){
    //유저가 로그인 상태인지 확인하기
    //파이어베이스 onAuthStateChanged 기능 이용  
    
    //option
    //  null >  아무나 출입이 가능한 페이지
    // true > 로그인한 유저만 출입이 가능한 페이지
    // false > 로그인한 유저는 출입 불가능한 페이지 

    function AuthenticationCheck(props){
        
        const loggedin = localStorage.getItem('isLoggedIn');

        const auth = getAuth();
        const dispatch = useDispatch();
        const navigate = useNavigate();
        
        useEffect(()=>{
           
            onAuthStateChanged(auth, (userlogined)=>{
                if (userlogined){   
                        if(option===false && loggedin===true){
                                console.log("Logged in")
                                navigate('/')
                            
                        }
                        dispatch(authUser(userlogined.uid))

                }else{
                    if(option===true){
                        // 사용자가 로그아웃한 상태이고, 페이지가 로그인한 사용자만 허용하는 경우
                        console.log("not Logged in")
                        navigate('/signin')
                    }
                }
            })

           
        },[auth, navigate, dispatch, loggedin])
        
        return <SpecificComponent{...props} />
    }

    return AuthenticationCheck
}

• AuthenticationCheck는 HOC을 생성하고 반환하는 함수
• SpecificComponent: HOC가 래핑할 페이지 컴포넌트를 나타냄
• option: 각 컴포넌트의 옵션은 3가지가 있다.
  - null: 아무나 출입이 가능한 페이지
  - true: 로그인한 유저만 출입이 가능한 페이지
  - false: 로그인한 유저는 출입 불가능한 페이지
  
  

1. localStorage에서 사용자의 로그인 상태를 가져온다.
2. 파이어베이스 auth의 onAuthStateChanged 함수를 사용해 현재 로그인한 사용자의 uid 정보를 가져올 수 있다.

• 사용자의 로그인 정보가 존재할 때
  • option이 false이고, loggedin이 true이면 메인페이지(’/’) url로 리다이렉트하고, 그게 아니면 authUser 액션 함수를 호출하여 사용자의 uid를 사용해 Redux 스토어를 업데이트 한다
• 사용자의 로그인 정보가 없을 때
  • 사용자가 로그아웃한 상태이고, 페이지가 로그인한 사용자만 허용하는 경우는 로그인페이지(’/signin’)로 리다이렉트한다.

3. 최종적으로, HOC은 래핑된 SpecificComponent를 반환

🌻 HOC 적용방법

---

• 다음과 같이 hoc에 component와 option에 인자를 넣어 페이지들의 접근 권한을 컨트롤한다.

export default auth(SignupPage, false);

export default auth(SigninPage, false);

export default auth(MainPage, true);