현재의 세션이나 탭에서만 상태가 유지되며 사용자가 인증된 탭이나 창이 닫히면 삭제됨
sessionStorage.setItem("MY_SESSION", "here");
sessionStorage.getItem("MY_SESSION");
// 하나만 삭제
sessionStorage.removeItem("MY_SESSION");
// 전부 삭제
sessionStorage.clear();
user.js
import firebase from 'firebase/compat/app';
const loginFB = (id, pwd) => {
return function (dispatch, getState, { history }) {
// 로그인 유지 (인증상태 지속성 수정)
// 작업이 끝나고 나면 로그인을 할 것
auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => {
// 기존에 작성한 로그인 방법 삽입
auth
.signInWithEmailAndPassword(id, pwd)
.then((user) => {
console.log(user);
dispatch(
setUser({
user_name: user.user.displayName,
id: id,
user_profile: "",
uid : user.user.uid, // 고유값 추가 지정(signupFB에도 작업해주자)
})
);
history.push("/");
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage);
});
});
};
};
session 확인
로그인 후 세션에 인증정보 저장됨
인증키가 key값, key값을 가져다 써야함
firebase.js
const apiKey = firebaseConfig.apiKey;
const auth =firebase.auth();
export {auth, apiKey};
헤더가 왔다갔다 하지 않도록 session과 redux에서 이중체크하여 로그인 상태 유지
Header.js
import { apiKey } from "../shared/firebase";
const Header = (props) =>{
.
.
const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`
const is_session = sessionStorage.getItem(_session_key)? true : false;
console.log(is_session) // true
if (is_login && is_session) {
// 로그인 유무에 따라 보여지는 헤더 코드
.
.
}
}
user.js
const loginCheckFB = () =>{
return function (dispatch, getState, {history}){
// 유저가 있는지 확인 (현재 로그인한 사용자 가져오기)
auth.onAuthStateChanged((user) =>{
if(user){
dispatch(
setUser({
user_name: user.displayName,
user_profile: '',
id: user.email,
uid:user.uid
})
)
}else{ // 로그인이 안되어 잇으면 리덕스에서 로그아웃 시키기
dispatch(logOut());
}
})
}
}
const actionCreators = {
logOut,
getUser,
signupFB,
loginFB,
loginCheckFB
};
App.js
세션이 있는지 체크 (loginCheckFB()) 후, 세션이 있으면 리덕스에서 로그인 체크한 다음 정보 넣어줌
import {useDispatch} from 'react-redux'
import {actionCreators as userActions} from '../redux/modules/user'
import {apiKey} from './firebase'
function App() {
const dispatch = useDispatch();
const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`
const is_session = sessionStorage.getItem(_session_key)? true : false;
React.useEffect(() =>{
if(is_session){
dispatch(userActions.loginCheckFB());
}
})
}