<Redirect>가 안될 때 history.push({state:})를 사용해보자 - 로그인 후 원래페이지로 이동하기

Mori·2022년 4월 22일
0

개발

목록 보기
3/5
post-thumbnail

내가 기록한 코드는 다른 내용도 조금 엮여있는데,
로그인 후 페이지 리다이렉트 시키실 분은
빨간 글씨만 봐주시면 될것 같다.

1. 다운로드 페이지에서 로그인 후 다시 다운로드 페이지로 리다이렉트 시키기 .

사실 react-router-dom 의 <Redirect> 를 사용하려 했으나,
왜인지 작동하지 않아서

react-router-dom v5에서 v6으로 업그레이드 하는게 방법일줄 알고
업그레이드를 진행하다가 막혀서,

방법을 더 찾아보고 history.push({state:"현재페이지위치"}) 로 해결하였다.

과정:

  1. 다운로드 버튼 클릭시 로그인 되있는지 판단함

  2. 로그인되있으면 다운로드 실행, 로그인되어있지 않으면
    로그인페이지로 이동시킨 후 유저가 로그인하면 다운로드페이지로 이동

  3. 로그인 정보가 있으므로 다운로드 실행함

문제의 이전 코드:

a href에 삼항연산자를 사용하고 있었다 ...
또한 api 요청 코드를 보면 다운로드하고자하는 소프트웨어명만 바꿔주면
해당 소프트웨어로 다운로드가 실행이 된다

clicnt = '소프트웨어명'


const userToken = userInfoFromRedux.accessToken; // 리덕스로 토큰 관리 중 
const NoToken = userToken === undefined || userToken === "";


<a href={NoToken ? // 토큰이 있는지 판단하고 
"#" : //없으면 # 실행(밑의 onClick={LogAlert} 실행됨 
APIADDRESS + "/clientDown?accessToken="+userToken+"&ip="+ip+"&client=deepcatch"} 
//토큰 있으면 위 주소 실행됨(소프트웨어가 다운로드되는 api요청임)
className="deepcatch" 
onClick={LogAlert}>

<a href={NoToken ? 
"#" : 
APIADDRESS + "/clientDown?accessToken=" + userToken + "&ip=" + ip + "&client=medip"}
className="medip" 
onClick={LogAlert}>

해결한 코드

  1. 현재는 3개의 소프트웨어 다운로드 컴포넌트들이
    a href= 각자의 소프트웨어 api요청주소 를 쓰고 있는데,
    client명만 바꿔주면 한 코드에서 유연하게 사용이 되므로
    onClick함수에 인자명을 묶어서 전달했다.

  2. history.push부분에 state를 묶어서 보낸다
    history.push({ pathname:"/Login", state:"/download" });
    state엔 login페이지에 갔다가 되돌아올 페이지 주소를 써준다.

  3. login.js페이지에서 로그인 처리 후
    history.push({pathname: location.state)} 로 보내도록 한다.


import {Link, useHistory} from "react-router-dom"; // 리액트 라우터 돔 버전 5를 사용중이다. 


//컴포넌트 이름 : Download
const Download = ({t, i18n, location}) => {
    const userInfoFromRedux = useSelector((state) => state.userData);
    const userToken = userInfoFromRedux.accessToken;
    const NoToken = userToken === undefined || userToken === "";

    const history = useHistory();
    
    const MoveLogPage = () => {
        history.push({ pathname:"/Login", state:"/download"}); // login페이지로 state를 묶어보낸다.
    };
    
    const LogFalse = useConfirm(t("Alert.RequireLogin"), MoveLogPage); 
    //토큰정보 없을 시 로그인 요청 알림이 뜨고 MoveLogPage함수를 실행시킨다.
    
    //토큰정보가 있으면 주소를 api요청주소로 이동시킨다.
    const LogTrue = (e) => {
        alert("Start Download");
        window.location.href= APIADDRESS + "/clientDown?accessToken="+userToken+"&ip="+ip+"&client=" + e 
        // e는 onClick할때 인자로 묶어보낸 소프트웨어명이다.
    };
    
    // 버튼 클릭시 실행됨 
    const LogAlert = (e) => {
        if (NoToken) {
            LogFalse(e);
        } else {
            LogTrue(e);
        }
    };

return ( //생략

<a className="deepcatch" onClick={ (e)=> LogAlert('deepcatch',e)}> //인자로 소프트웨어명(문자열)을 보낸다.
<a className="medip" onClick={ (e)=> LogAlert('Medip',e)}>

)

Login.js

로그인 처리 후 .then 부분에
history.push({pathname: location.state})를 써준다.


import { Link, useHistory, useLocation  } from "react-router-dom";

	const history = useHistory();

// 로그인 후 코드 .then 처리..
	.then((result) => {
					alert(t("Alert.LoginSuccess"));
					dispatch(userLogin(result.data.data));
					if(location.state){
						history.push({
						pathname: location.state, 
                          //여기서 location.state는 이전페이지에서 보낸 /download 이다.
					})
					} else{
						history.push('/') //location.state가 없으면 메인으로 이동시킨다.
					};

0개의 댓글