프로젝트 수정 7 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 로그아웃하기)

* 현재 진행상황

- 프로젝트에 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;