업로드 페이지 후 로그아웃화면(LandingPage)로 강제 이동되는 경우 해결책
1042
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;
강의 내용은 훌륭하나, 환경 설정 오류 때문에 진도를 나갈 수 없습니다. 20년 버전 강의.
강의자료는 어디서 볼 수있나요??
이 쇼핑몰 만들기 강의는 관리자페이지 만드는건 없나요
웹에서 실시간 코드반영이 안돼요
app.use질문
강사님께 어떻게 직접질문할수있어요??
const함수같은거 기초강의는 어디있나요
리덕스 참조챕터가 어딨어요? 미리듣고오라는데요
강의가완전 오래되서 다 틀리네 app.jsx도 tailwind css 다틀림 무책임함
개발자도구에 redux란이 없어요
npx tailwindcss init -p 에서 계속 에러나요
쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요
강의하다 줌으로 설명가능한지좀 정확히 알려주세요. 이 선생님 정책이 어떻게 되는데요. 직접 연락할 메일이라도 알려주세요
도표 강의 자료 열람 불가능
tailwindcss를 vite에서 이용하는 방식이 바뀐것 같습니다.
eslint 설정 후 오류가 납니다.
오버로드 오류
VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?
webkit-text-size-adjust 오류
does not provide an export named 'userReducer'
빌드 배포
삭제 예정 강의는 언제 삭제 되나요? 저것때문에 수강완료를 못하면 회사에서 비용을 청구한다고 합니다~
