[IONIC] LocalStroage로 로그인값 유지시키기

소스 다운로드 > https://github.com/cpromise/realtimeChat

이 예제에 사용된 소스 : deactivate with E-mail을 다운로드 받으시면 됩니다.

이 예제를 완성시킨 소스 : keep logged in with localstorage을 다운로드 받으시면 됩니다.

웹앱을 만들면 브라우저의 속성을 많이 사용할 수 있습니다.

브라우저의 window객체에는 localStroage라는 객체가 있습니다. (sessionStorage도 있으나 차이가 있음.)

localStorage와 sessionStorage의 유일한 차이는 만료기간을 설정할 수 있다는 것인데요.

Ionic에서 제공하는 localStorage를 사용하여 로그인값을 유지시키는 예제를 진행해보겠습니다.

Step 1. 먼저 Factory하나 등록해줍시다.

<service.js>

기존 service.js에 있는 쓰지도 않는 팩토리를 지워주시고, 이렇게 새로 넣어주세요.

Step 2. 컨트롤러에서 localStorage를 사용해볼까요?

<tabs-account.html과 연결된 컨트롤러>

<tabs-account.html의 console창>

컨트롤러에 $localstorage를 포함시킨 뒤 사용법을 간단하게 보여드렸어요.

로그인이 성공했을 경우 로그인데이터를 localstorage에 저장하면 원하는 결과가 나올듯하쥬~?

Step 3. localStorage를 사용해서 로그인을 유지시켜 봅시다.

<로그인 유지가 안될 경우 발생하는 불편함>

이런 불편함을 방지하고자 로그인을 유지시키도록 하죠.

<E-mail로그인 부분>

<facebook로그인 부분>

먼저 로그인이 성공했을 때, 로그인 값을 셋팅해주도록 합시다.

이제 localstorage에 데이터를 저장하니 rootScope는 필요없습니다.

이제 채팅창에서도 rootScope이 아닌 localstorage에서 로그인여부를 검사해야겠지요?

<채팅 send버튼을 클릭했을 때 실행되는 메소드>

이건 구버전!! rootScope에서 로그인데이터를 확인하고 있죠?

이걸 아래처럼 바꿔줍시다!

<채팅 send버튼을 클릭했을 때 실행되는 메소드>

모든 rootScope가 localStorage로 대체되었습니다.

JSON을 사용해준 이유는.. 

localstorage에서의 기능이 string으로 사용되도록 제한이 된다는군요. 그래서 사용해주었습니다.  

Factory에 setObject를 등록해놨기 때문에 

var authData = JSON.parse($localstorage.get("authData"));

대신에

var authData = $localstorage.getObject("authData"));

이렇게 써주셔도 무방합니다. 실제 window객체에서는 JSON을 사용해야하니 위처럼 써봤습니다.

<출처 : http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage>

Step 4 테스트를 해봅시다.

<앱을 재시작해도 로그인이 유지된다.>

테스트 결과도 만족스럽군요!!

More Step 1. 로그아웃은 어떻게 하나요?

//귀찮으니깐 테스트는 하지않고 코드로만 var logout = function(){ $localstorage.set("authData",null); }