WEB 만들기 -31 로그아웃

랜딩 페이지에 버튼 하나 생성하면되는것인데 

LandingPage로 가서 

 

여기 아래 부분에 

<button>

  로그아웃 

</button>

 

넣어주고 나서 

 

    const onClickHandler = ()=>{

    axios.get('/api/user/logout')

    .then(response=>{

            console.log(response.data)

        })

    }

 

추가

            <button onClick={onClickHandler}>

            로그아웃

            </button>

수정 하면 끝

 

그리고 제대로 로그아웃이 되면 로그인 창으로 넘어갈 수 있도록

 

 

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")
          }else{
            alert('Failed to logout')
          }
        })
    }


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

export default LandingPage

최종적인 소스이다.

로그아웃이 되면 로그인 페이지로 돌아가면 맞는것입니다.