로그인 성공 시 알맞은 페이지 return
뒷단 작업
로그인을 성공하게 되면 상단과 하단 화면이 알맞게 바뀌여야 합니다. 그러기 위해서 로그인이 성공되었는지, 실패하였는지에 대한 결과를 앞단에 넘겨줘야합니다.
•
핸들러에 다음과 같은 메소드를 추가해줍니다.
◦
successHandler
◦
failureHandler
◦
sendRedirect 에 대한 설명
Sends a temporary redirect response to the client using the specified redirect location URL.
•
컨트롤러에 보낼 결과를 작성해줍니다.
앞단 작업
login.js
뒤에서 result 로 보낸 데이터를 .data 를 이용해 받아오고 결과값을 뽑아옵니다.
결과
•
받아온 데이터를 이용 하기전, 뷰의 구조를 다시한번 살펴봐야 합니다.
bottomframe 에서 받아온 데이터를 상위컴포넌트인 nintendoframe 으로 받아오고, 이를 이용하여 적절한 화면을 return 해주는것이 목표입니다
먼저 로그인 컴포넌트를 보겠습니당.
로그인 input 을 입력하고 로그인 버튼을 누르면 doLogin() 함수가 실행되는데요, 이전에 login.js 에 만들어둔 함수를 거치며 결과값이 loginCheck 의 파라미터로 들어가게 됩니. 이제 inject 에 있는 loginCheck 를 찾아가보겠습니다.
닌텐도 프레임의 뷰파일을 아래와 같이 수정해주었습니당.
$refs 를 통해 프레임과 상단 프레임이 데이터 통신을 할 수 있습니다!
this.$refs.topArea.loginCheck(result) ⇒ ref=”topArea” 에 있는 loginCheck() 메소드에 result 를 파라미터로 넣어줄것이다.
마지막으로 상단 뷰 파일로 이동해보겠습니다.
이렇게 받은 데이터를 이용하여 상황에 따라 알맞은 화면이 나오도록 처리할 수 있습니다
데이터의 흐름 정리
bottomLogin inject → nintendoFrame provide ref → topFrame
provide 와 inject 에 대한 설명은 이곳을 봐주세용
결과 화면
•
로그인전
•
로그인 성공
◦
일단 url 분기는 아래를 기준으로 했습니당 내일 상의해서 어떻게 할지 틀을 정해보도록 합쉬다
•
url 분기
문제점
새로고침하면 로그인정보 날아감..(?)
새로고침 후에도 쿠키는 유지되어 있는데,,,
아무래도 로그인하고 값을 받아오는 과정에서 로그인 된 그 순간만을 체크해서 넘긴거 같은데,, 쿠키에 대한 공부를 조금더 해야할 것 같습니당.