로그아웃 기능

로그아웃 만들기

로그아웃은 다른 기능보다 간단하게 구현할 수 있다.
LandingPage에 버튼을 하나 만들어 로그아웃을 하게 만들면 된다.

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage(){

    useEffect(() => {
        axios.get("/api/hello").then((response) => {
          console.log(response);
        });
      }, []);

    return(
        <div style={{
            display: 'flex', flexDirection: 'column',justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
            <h2>시작 페이지</h2>
            <button>
                로그아웃
            </button>
        </div>
    )
}

export default LandingPage

우선 뷰를 만들었다. 
button에 핸들러를 달아 axios로 logout request를 요청하면 마무리된다.

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage(){

    useEffect(() => {
        axios.get("/api/hello").then((response) => {
          console.log(response);
        });
      }, []);

      const onClickHandler = () =>{
          axios.get('/api/users/logout')
          .then(response => {
              console.log(response.data)
          })
      }

    return(
        <div style={{
            display: 'flex', flexDirection: 'column',justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
            <h2>시작 페이지</h2>
            <button onClick={onClickHandler}>
                로그아웃
            </button>
        </div>
    )
}

export default LandingPage

여기서 로그아웃이 성공한다면 로그인 페이지로 다시 보내는 작업까지 해보자.

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage(props){

    useEffect(() => {
        axios.get("/api/hello").then((response) => {
          console.log(response);
        });
      }, []);

      const onClickHandler = () =>{
          axios.get('/api/users/logout')
          .then(response => {
              if(response.data.success){
                props.history.push("login")
              }
          })
      }

    return(
        <div style={{
            display: 'flex', flexDirection: 'column',justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
            <h2>시작 페이지</h2>
            <button onClick={onClickHandler}>
                로그아웃
            </button>
        </div>
    )
}

export default LandingPage

잘 넘어가지는것을 확인할 수 있다.