과거 프로그래밍 자료들/프로젝트
프로젝트 수정 7 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 로그아웃하기)
평부
2022. 5. 16. 17:33
* 현재 진행상황
- 프로젝트에 CRUD만 만든 상황
- fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단
- node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정
- 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분)
[로그아웃 만들기 - client 부분]
1. LandingPage에서 '로그아웃'버튼 만들기
2. 구글 크롬에서 확인하기
3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기
1. LandingPage에서 '로그아웃'버튼 만들기
import React, { useEffect } from "react";
import axios from "axios";
function LandingPage() {
useEffect(() => {
axios.get("/api/home").then((response) => console.log(response));
});
const onClickHandler = () => {
axios.get("/api/user/logout").then((response) => {
}
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<h2>시작페이지</h2>
<button onClick={onClickHandler}>로그아웃</button>
</div>
);
}
export default LandingPage;
2. 구글 크롬에서 확인하기
- 로그인 후 로그아웃 확인 가능함
3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기
- 로그인하지 않고 로그아웃만 누를 경우 로그아웃 안 된다고 알림 나오기
import React, { useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom"; //페이지 이동1
function LandingPage() {
const navigate = useNavigate(); //페이지 이동2
useEffect(() => {
axios.get("/api/home").then((response) => console.log(response));
});
const onClickHandler = () => {
axios.get("/api/user/logout").then((response) => {
// console.log(response.data);
if (response.data.success) {
navigate("/login"); //페이지 이동3
} else {
alert("로그아웃하는데 실패했습니다.");
}
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<h2>시작페이지</h2>
<button onClick={onClickHandler}>로그아웃</button>
</div>
);
}
export default LandingPage;