2주차 - 로그인 유지하기 / 로그아웃 구현하기 / 퀴즈

1. 로그인 유지하기

👉 이제 쿠키에 로그인 유무를 저장하지 않죠!

파이어베이스 auth를 통해 관리하고 있으니까요. 🙂

그럼, 페이지가 새로고침 되었을 때 로그인은 어떻게 유지하면 좋을까요?

 

- 로그인 시, 세션에 로그인 상태를 기록 하도록 바꿔줍니다.

...
import firebase from "firebase/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,
            })
          );

          history.push("/");
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;

          console.log(errorCode, errorMessage);
        });
    });
  };
};

...

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

 

- firebase 인증 키를 export 해줍니다.

// src/shared/firebase.js
export const apiKey = firebaseConfig.apiKey;

 

- 세션을 체크해서 로그인 상태를 유지합니다.

// src/shared/Permit.js
import React from "react";
import {useSelector} from "react-redux";
import { apiKey } from "./firebase";

const Permit = (props) => {
    // 유저 정보가 있는 지, 토큰이 있는 지를 체크합니다!
    const user_info = useSelector(state => state.user.user);

    const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`;

    // 세션이 있나 확인합니다
    const is_login = sessionStorage.getItem(_session_key);

    if(is_login && user_info){
        return <React.Fragment>{props.children}</React.Fragment>;    
    }

    return null;
}

export default Permit;

 

// src/components/common/Header.js
...
import { apiKey } from "../../shared/firebase";
...

const Header = React.memo((props) => {
 ...
  const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`;

  // 세션이 있나 확인합니다
  const is_login = sessionStorage.getItem(_session_key);

 

- 혹은? 파이어베이스를 통해 로그인한 상태가 맞나 확인합니다. 

  맞다면 -> 유저 정보를 가져다가 넣어 줘야 하기 때문이죠

// 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());
      }
    })
  }
}
...
// action creator export
const actionCreators = {
  logOut,
  getUser,
  signupFB,
  loginFB,
  loginCheckFB,
};

 

// App.js
import './App.css';
import React from "react";

import {BrowserRouter, Route} from "react-router-dom";
import {ConnectedRouter} from "connected-react-router";
import {history} from "../redux/configureStore";

import PostList from "../pages/PostList";
import Login from "../pages/Login";
import Signup from "../pages/Signup";

import Header from "../components/Header";
import {Grid} from "../elements";

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());
    }

  }, []);

  return (
    <React.Fragment>
      <Grid>
        <Header></Header>
        <ConnectedRouter history={history}>
          <Route path="/" exact component={PostList} />
          <Route path="/login" exact component={Login} />
          <Route path="/signup" exact component={Signup} />
        </ConnectedRouter>
      </Grid>
    </React.Fragment>
  );
}

export default App;

---

2. 로그아웃 구현하기

👉 사실 로그아웃은 엄청엄청 간단합니다!

파이어베이스 인증에서 제공하는 로그아웃 함수 하나만 호출하면 끝나거든요!

// redux/modules/user.js
const logoutFB = () => {
  return function (dispatch, getState, {history}) {
    auth.signOut().then(() => {
      dispatch(logOut());
      history.push("/");
    });
  };
};

---

퀴즈 -로그인 시에만 보이는 글쓰기 작성

import "./App.css";
import React from "react";
import { Route } from "react-router-dom";
import { ConnectedRouter } from "connected-react-router";
import { history } from "../redux/configureStore";

import PostList from "../pages/PostList";
import Login from "../pages/Login";
import Signup from "../pages/Signup";
import Header from "../components/Header";
import { Grid, Button } from "../elements";

import { actionCreators as userActions } from "../redux/modules/user";
import { useDispatch } from "react-redux";
import { apiKey } from "../shared/Firebase";

import Permit from "./Permit";

function App() {

  // 세션이 있는 지 없는 지 확인해서 있으면 redux에 알려준다.
  const dispacth = useDispatch();
  const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`;
  const is_session = sessionStorage.getItem(_session_key) ? true : false;

  React.useEffect(()=>{
    if(is_session && _session_key){
      dispacth(userActions.loginCheckFB());
    }
  })

  return (
    <React.Fragment>
      <Grid>
        <Header></Header>
        <ConnectedRouter history={history}>
          <Route path="/" exact component={PostList} />
          <Route path="/login" exact component={Login} />
          <Route path="/signup" exact component={Signup} />
        </ConnectedRouter>
      </Grid>
      <Permit>
        <Button is_float text="+"></Button>
      </Permit>
    </React.Fragment>
  );
}

export default App;