서론
앞서 포스팅했던 Redux-persist 로직을 사용하다보니 한 가지 문제를 만났다.
그것은 바로 웹페이지의 창을 닫았는데도 로그인이 유지된다는 것이다.
창을 닫았을 때에도 리덕스에 상태가 유지되다보니 다시 로그인을 하지 않아도 되는 점은 편리하다고 할 수 있지만 한편으론 보안성의 헛점이 되겠다고 판단하였다.
최초에 내가 Redux-Persist를 도입했던 이유는 새로고침 했을 때 리덕스의 정보가 초기화 되는 것을 막고자함이었지, 창이 닫혀도 로그인이 유지되는 것을 원한 건 아니었다.
이 문제를 어떻게 해결할 수 있을까?
여러가지 시도
몇가지 가능할만한 방법들을 생각해보았다. 결론적으로는 실패한 방법들이었다.
시행착오1. 창이 닫힐 때 로그아웃 함수를 발동시키기
window.addEventListener("beforeunload", function (event){...})흔히 창을 닫으려할 떄, "저장되지 않았습니다 정말 나가시겠습니까?" 와 같은 경고창을 띄워줄 때 사용되는 함수라고 한다.
이 함수를 사용하면 될 것이라 생각했고, 실제로 페이지를 나갈 때 로그아웃을 시키는 것이 가능하였지만 문제점이 있었다. 바로 새로고침을 할 때나, 페이지를 이동할 때에도 로그아웃이 되어버린 다는 것이다.
해당 함수는 브라우저의 상태가 변경되는 창닫기, 페이지 이동, 새로고침 이 세가지의 경우를 구분하지 못하지 못하므로 디테일한 조건문을 수행할 수 없다.
구글링을 해서 여러 코드를 실행해보았지만 의도대로 작동한 코드는 없었다.
시행착오2. 생략..
해결방안 : 세션 스토리지
브라우저에는 로컬스토리지 뿐만 아니라 세션스토리지라는 것이 하나 더 있다.
로컬 스토리지가 아닌 세션 스토리지에 리덕스의 상태를 저장함으로써 이 문제를 해결할 수 있다.
로컬 스토리지와 세션 스토리지의 차이점
로컬 스토리지
- 창을 닫았다 열어도 그대로 남아있음.
- 새로고침을 해도 그대로 남아있음.
- 다른페이지로 넘어갔다 와도 남아있음.
세션 스토리지
- 창을 닫았다 열면 초기화 되어있음.
- 새로고침을 해도 그대로 남아있음.
- 다른페이지로 넘어갔다 와도 남아있음.
보다시피 딱 창을 닫았을 때만 로그아웃이 되는 것을 구현하기에 가장 적합하다는 것을 알 수 있다.
사용 방법
기존에 로컬 스토리지에 저장하을 하는 Redux-persist로직을 만들어 놓았다면, 사용 방법은 매우 간단하다.
다음가 같이 storageSession라는 것을 import해온다.
import storageSession from "redux-persist/lib/storage/session"; 이것으로 persistConfig의 storage항목을 교체해주기만 하면 된다.
import { createStore } from "redux";
import rootReducer from "./rootReducer";
import { persistStore, persistReducer } from "redux-persist";
//import storage from "redux-persist/lib/storage"; // localStorage를 사용할 경우
import storageSession from "redux-persist/lib/storage/session"; // sessionStorage를 사용할 경우
const persistConfig = {
key: "root",
// storage: storage, // localStorage를 사용할 경우
storage: storageSession, // sessionStorage를 사용할 경우
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
// const store = createStore(rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
export { /* default */ store, persistor };
