업로드 페이지 후 로그아웃화면(LandingPage)로 강제 이동... - 인프런

안녕하세요

강사님이 올려주신 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;

인프런 커뮤니티 질문&답변

업로드 페이지 후 로그아웃화면(LandingPage)로 강제 이동되는 경우 해결책