로그인 유지하기

HYOJIN·2021년 10월 2일
2

React

목록 보기
2/9
post-thumbnail

session 방식 사용

현재의 세션이나 탭에서만 상태가 유지되며 사용자가 인증된 탭이나 창이 닫히면 삭제됨

  • 추가하기 (key = MY_SESSION, value = here)
sessionStorage.setItem("MY_SESSION", "here");
  • 가져오기
sessionStorage.getItem("MY_SESSION");
  • 삭제하기
// 하나만 삭제
sessionStorage.removeItem("MY_SESSION");

// 전부 삭제
sessionStorage.clear();

session에 기록하기

user.js

import firebase

import firebase from 'firebase/compat/app';

middlewares

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 확인

로그인 후 세션에 인증정보 저장됨

firebase 인증키 export

인증키가 key값, key값을 가져다 써야함

firebase.js

apiKey export

const apiKey = firebaseConfig.apiKey;
const auth =firebase.auth();

export {auth, apiKey};

session을 체크해서 로그인 유지하기

헤더가 왔다갔다 하지 않도록 session과 redux에서 이중체크하여 로그인 상태 유지

Header.js

import

import { apiKey } from "../shared/firebase";

session 체크

  • 세션키로 가져오는 값이 있는지 없는지 (로그인 했는지 안했는지) 확인
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) {
  // 로그인 유무에 따라 보여지는 헤더 코드
  .
  .
  }
}
  • 콘솔창에는 true, 하지만 redux에 있는 데이터가 날아갔기 때문에 헤더가 안바뀜

user.js

middleware

  • 파이어베이스에 로그인이 되어 있으면, FB 자체함수 (현재 로그인한 사용자 가져오기 - firebase docs 참고)를 사용해 값을 가져와서 리덕스에 넣음
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());
            }
        })
    }
}

export loginCheckFB

const actionCreators = {
  logOut,
  getUser,
  signupFB,
  loginFB,
  loginCheckFB
};

App.js

세션이 있는지 체크 (loginCheckFB()) 후, 세션이 있으면 리덕스에서 로그인 체크한 다음 정보 넣어줌

import

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());
    }
  })
  }
profile
https://github.com/hyojin-k

0개의 댓글