Dnote 5 - 3. React - 로그인 유지 및 로그아웃 기능 구현.

killi8n·2018년 9월 23일
0

Dnote

목록 보기
13/15
post-thumbnail

자 이제는 로그인과 회원가입이 되었으니 로그인이 되었을때, 유지하는 기능을 추가하고, 로그인이 만약 안되었다면, 접속시 바로 로그인 페이지로 넘겨보고, 마지막으로 로그아웃 기능까지 구현해보겠습니다.

일단 장고 앱에서는 회원가입만 하더라도, 토큰을 부여하게 됩니다. 그러니까, 회원가입 하자마자 로그인을 한다고 생각하시면 될것 같습니다.

일단 로그인을 유지하려면 localStorage를 이용해야 합니다.

따라서 로그인이나 회원가입이 완료되면 저희 redux 의 auth에서 logged라는 state가 있는데, 이 logged가 true로 바뀌게 됩니다.

modules/auth.js

위와 같이 말이죠. 그리고 userInfo라는 state도 그에 맞에 변경이 됩니다.

저희는 이제 이 값들을 AuthContainer에서 componentDidUpdate로 이용할 계획입니다.

containers/AuthContainer.js

자 이제 회원가입이나 로그인을 해보시면 이동하고, chrome 개발자 콘솔을 사용하여 localStorage로 쳐보시면 값이 저장된것을 알수 있습니다. 또한 localStorage에는 문자열밖에 저장하지 못하므로, JSON.stringify를 사용하여 JSON을 문자열로 변환시켜줍니다.

아직까지는 에러가 발생하죠? 이유는 간단합니다, 저희가 메인 페이지로 이동하자마자 NoteContainer에서는 componentDidMount로 바로 노트 리스트를 받아오기 때문인데요, 저희는 아직 Header에 토큰값을 넘겨주지 않았기 때문에 401 에러가 뜹니다.

이 에러를 고쳐주기 위해서는 redux의 notes모듈로 넘어가서 Header값에 Authorization을 넣어주어야 합니다.

modules/notes.js

음 이렇게 바꾸고나니 또 에러가뜨죠? 이유는 저희가 django 앱에서 rest framework의 paging 기능을 사용했기 때문인데요, 이렇게 되면 받아올때 다음과 같은 정보들을 받게 됩니다.

이런식으로 말이죠, count는 받아오는 아이템의 갯수, next는 다음 페이지의 api url, previous는 전 페이지의 api url, results에는 아이템들의 리스트값이 담겨 옵니다. 따라서 results라는 변수로 response값을 다시 가져와야 합니다.

modules/notes.js

reducer의 GET_NOTES_SUCCESS 부분을 다음과 같이 바꿔줍니다. 이렇게 되면 오류가 나지 않고, 받아온 리스트들을 잘 보여주게 됩니다.

저희는 다른 payload들은 사용하지 않습니다. 예를들면, count, next, previous같은 것들인데요, 단순히 보여주기만 한다면 위의 값들을 이용하여 무한스크롤링을 해도 상관이 없습니다만 저희는 중간에 삭제를 하거나 수정을 하기 때문에 마지막 아이템을 기준으로 다시 노트들을 가져옵니다. 따라서 딱히 이용할 이유가 없으므로, 일단 results값만 사용하겠습니다.

자 이제는 다시 auth모듈로 돌아가서 로그인 정보를 유지하고 로그인 되지 않았다면, auth page로 보내는 기능을 추가하겠습니다. 전에 저희가 django에서 만든 checkUser 를 이용할 계획입니다.

modules/auth.js

modules.index.js

위와같이 작성한후, 전역적으로 사용할 BaseContainer.js 를 만들어줍니다.

containers/BaseContainer.js

그리고 이 BaseContainer를 App.js에 반영한다.

components/App.js

이렇게 되면 로그인이 되었다면, 새로고침을 해도 로그인 상태가 유지됩니다.

만약 로그인이 되어있지 않다면, /auth/login으로 이동하겠죠.

그렇다면 이제 로그아웃 기능을 구현해볼까요?

modules/auth.js

modules/index.js

로그아웃 버튼을 눌러야 하기 때문에 HeaderContainer를 만들어줍니다.

containers/HeaderContainer.js

그리고 components의 MainStructure에서 Header를 HeaderContainer로 변경해줍니다.

components/structure/MainStructure/MainStructure.js

이제 로그아웃버튼을 누르면 로그아웃 통신이 일어나게 되는데 페이지 변경이 안되죠? 다음과 같이 변경해줍니다.

containers/BaseContainer.js

로그아웃 한채로 / 로 이동하면 다시 로그인 페이지로 돌아오게됩니다.
(register페이지 제외)
자 이제 로그아웃 기능까지 완료되었습니다!

아 그리고 빼먹은 부분이 있는데, 이제는 모든 CRUD기능들에 Authorization Header를 붙여줘야 합니다. 안그러면 401 에러가 뜨게됩니다.

modules/notes.js

이렇게 되면 CRUD도 정상 작동합니다.

profile
killi8n

0개의 댓글