내가 기록한 코드는 다른 내용도 조금 엮여있는데,
로그인 후 페이지 리다이렉트 시키실 분은
빨간 글씨만 봐주시면 될것 같다.
사실 react-router-dom 의 <Redirect>
를 사용하려 했으나,
왜인지 작동하지 않아서
react-router-dom v5에서 v6으로 업그레이드 하는게 방법일줄 알고
업그레이드를 진행하다가 막혀서,
방법을 더 찾아보고 history.push({state:"현재페이지위치"}) 로 해결하였다.
다운로드 버튼 클릭시 로그인 되있는지 판단함
로그인되있으면 다운로드 실행, 로그인되어있지 않으면
로그인페이지로 이동시킨 후 유저가 로그인하면 다운로드페이지로 이동
로그인 정보가 있으므로 다운로드 실행함
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}>
현재는 3개의 소프트웨어 다운로드 컴포넌트들이
a href= 각자의 소프트웨어 api요청주소 를 쓰고 있는데,
client명만 바꿔주면 한 코드에서 유연하게 사용이 되므로
onClick함수에 인자명을 묶어서 전달했다.
history.push부분에 state를 묶어서 보낸다
history.push({ pathname:"/Login", state:"/download" });
state엔 login페이지에 갔다가 되돌아올 페이지 주소를 써준다.
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가 없으면 메인으로 이동시킨다.
};