-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
업로드 페이지 후 로그아웃화면(LandingPage)로 강제 이동되는 경우 해결책
22.05.20 11:06 작성 조회수 817
0
안녕하세요
강사님이 올려주신 git을 다운 받으신 분들은 상관 없으시겠지만,
저처럼 강사님의 기본강의(로그인, 회원가입, 로그아웃, 인증 부분)으로 바로 넘어오신 분들 중
혹시 막히신 분들이 계실까 해서 남깁니다
* 문제 1 : App.js에서 uploadProductPage를 true로 했으나 로그인 후 'localhost:3000/'으로 강제 이동하는 경우
* 해결책 : hoc/auth 수정할 것
[hoc/auth.js] - else 부분에 추가
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { auth } from "../_actions/user_action";
import { useNavigate } from "react-router-dom";
export default function (SpecificComponent, option, adminRoute = null) {
//backned의 그 사람의 현재 상태 확인
//api/user/auth로 정보 보내기
//null : 아무나 출입 가능
//option이 true : 로그인 한 사람만 출입 가능
//option이 false : 로그인한 유저는 출입 불가능
function AuthentificationCheck(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
let user = useSelector((state) => state.user);
useEffect(() => {
dispatch(auth()).then(async (response) => {
console.log(response);
//로그인 하지 않은 상태
if (await !response.payload.isAuth) {
if (option === true) {
//로그인으로 이동 시
navigate("/login"); //로그인페이지로 가게 함
}
} else {
//response.payload.isAuth = true
//로그인한 상태(로그인페이지, 회원가입 페이지 이동하지 않아야 함)
if (adminRoute && !response.payload.isAdmin) {
//option이 true일 때
navigate("/");
} else {
//option이 false일 때
//false상태
if (option === false) {
props.history.push("/");
}
}
}
});
}, []);
return <SpecificComponent />;
}
return <AuthentificationCheck />;
}
* 문제 2 : RightMenu.js와 LeftMenu.js에서
warning.js:6 Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead. 발생하는 경우
* 해결책 : https://ant.design/components/menu/ 참고하기
[RightMenu.js]
import React from "react";
import { Menu } from "antd";
import axios from "axios";
import { USER_SERVER } from "../../../../Config";
// import { withRouter } from "react-router-dom";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
const items = [
{ label: <a href="/login">Signin</a>, key: "mail" },
{ label: <a href="/register">Signup</a>, key: "app" },
];
const logInItems = [
{ label: <a href="/product/upload">upload</a>, key: "upload" },
{
label: <a href="/">logout</a>,
key: "logout",
},
];
function RightMenu(props) {
const navigate = useNavigate();
const user = useSelector((state) => state.user);
const logoutHandler = () => {
axios.get(`${USER_SERVER}/logout`).then((response) => {
if (response.status === 200) {
navigate("/login");
} else {
alert("Log Out Failed");
}
});
};
if (user.userData && !user.userData.isAuth) {
return <Menu mode="horizontal" items={items} />;
} else {
return (
<Menu mode="horizontal" items={logInItems} onClick={logoutHandler} />
);
}
}
export default RightMenu;
// export default withRouter(RightMenu);
[ LeftMenu.js]
import React from "react";
import { Menu } from "antd";
const items = [
{ label: <a href="/">Home</a>, key: "mail" },
{ label: <a href="/blog">Blogs</a>, key: "app" },
];
function LeftMenu(props) {
return <Menu mode="horizontal" items={items} />;
}
export default LeftMenu;
답변을 작성해보세요.
1
답변 1