[react] 자동 로그인

[react] 자동 로그인

 

자동 로그인 

• 모바일에서 자동 생성된 token을 url로부터 가져와 내부 저장소에 저장하고, 백엔드로 전달

const params = new URL(document.location).searchParams //모바일에서 자동 생성된 firebaseToken 가져오기
const firebaseToken = params.get("firebaseToken")

const onAutoLogin = useCallback(() => { //자동 로그인
    if (firebaseToken !== null && firebaseToken !== "") {//token 있을때
        window.sessionStorage.setItem("token", firebaseToken) //토큰 저장
        api.post(`로그인 api`, { firebaseToken }) //토큰 백엔드에 보내기
            .then((res) => {
                if (res.data.ok) {
                    //백엔드로부터 받은 로그인 데이터 내부 저장소에 저장
                    //홈화면 보내기
                } else {//없는 token 알때
                    //회원가입 페이지로 보내기
                }
            })
            .catch((err) => console.log(err));
    } else { //token 없을때
        //회원가입 페이지로 보내기
    }
}, [firebaseToken])

useEffect(() => { //랜딩 -> 토큰 있으면 오토로그인 -> 없으면 회원가입 페이지
    if (firebaseToken) onAutoLogin()
    else {
      //회원가입 페이지 이동하기
      }
    }
}, [])

 

일반 로그인

const [loginDatas, setLoginDatas] = useState({ id: '', pass: '', token: '' })

const onLogin = async (e) => {
    e.preventDefault()
    const urlParams = new URL(document.location).searchParams
    const firebaseToken = urlParams.get("firebaseToken") //url로 토큰 가져오기
    const sessionToken = window.sessionStorage.getItem("token") //세션스토리지에서 토큰 가져오기 
    let params = {
        userId: loginDatas.id,
        pass: loginDatas.pass,
        firebaseToken: loginDatas.token,
    }
    if (firebaseToken !== null && firebaseToken !== '') { //url 토큰
        setLoginDatas({ ...loginDatas, token: firebaseToken })
    } else if (sessionToken !== null && sessionToken !== '') { //storage 토큰
        setLoginDatas({ ...loginDatas, token: sessionToken })
    }

    const res = await api.post(`로그인 api`, params)
    try {
        if (res.data.ok) {
        	//백엔드에서 받은 로그인 정보 내부 저장소에 저장
            //홈화면으로 보내기
            setLoginDatas({ id: '', pass: '', token: '' })
        } else {
            //에러 메시지 출력
        }
    } catch (err) {
        console.log(err)
    }
}