[React] 로그아웃 기능

중요한 로그아웃 기능을 빼먹었네요.

 

app.get('/api/users/logout', auth, async (req, res) => {

  try {

    await User.findOneAndUpdate({ _id: req.user._id }, { token: "" });

    return res.status(200).send({ success: true });

  } catch (error) {

    return res.json({ success: false, error });

  }

});

 

서버에서 로그아웃을 구현했었는데

 

id에 해당하는 user의 id가 존재한다면 토큰을 지워버리는 메커니즘입니다.

 

성공한다면 success: true를 반환할 것입니다.

 

그럼 먼저 로그아웃 버튼을 만들어 주겠습니다.

 

<button onClick = {onClickHandler}>로그아웃</button>

    </div>

 

랜딩페이지에서 만들어주고

 

버튼을 눌렀을 때 동작하는 onClickHandler도 정의해줍니다.

 

const onClickHandler = () => {

    axios.get(`/api/users/logout`)

        .then(response => {

            if (response.data.success) {

                navigate("/login")

            } else {

                alert('로그아웃 하는데 실패했습니다.')

            }

        })

}

 

서버에서 로그아웃 요청이 성공하면 로그인 페이지로 이동하고

 

실패하면 에러메세지를 띄울 것입니다.

 

LoginPage

 

다시 로그인을 해주고

LandingPage

 

로그아웃 버튼을 눌러보겠습니다.

 

로그아웃 성공

 

그러면 이렇게 다시 로그아웃 페이지로 오게됩니다.

 

여기까지 로그인, 로그아웃, 회원가입기능까지 구현했습니다.

 

다음 시간에는 마지막 작업인 hoc Auth에 대해서 공부해보겠습니다!

 

감사합니다.