React로 블로그 만들기 #8

React로 블로그 만들기 #8

 - 로그인 구현(5) 새로고침 후 로그인 유지 -

1. 로그인 유지

- 로그인을 한다고 해도 자동으로 로그인 상태가 유지되지 않는다.
- 브라우저를 닫거나 새로고침할 시 스토어 값이 초기화되므로 페이지에 다시 들어왔을 때 로그인을 유지하는 로직이 필요하다.

- TodoApp에서는 쿠키를 이용하여 로그인을 유지하였지만, 블로그 앱에서는 HTML5에서 제공하는Web Storage API를 사용한다.

- 또한 로그아웃 시 소셜로그인으로 발급받은 토큰을 제거하도록 로직을 추가해야함.

2. localStorage vs sessionStorage

- Key와 Value 값으로 저장.

- 문자열이 아닌 객체도 저장이 가능하며 5MB까지 저장 가능함.

- 쿠키와 다르게 만료기간을 지정할 수 없으며, 서버로 전송되지 않음.

- 자동로그인을 원하면 localStorage를 사용하고 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용

1) localStorage

- 사용자가 지우지 않는 이상 영구적으로 계속 브라우저에 남아있음.

- 따라서 지속적으로 필요한 정보를 저장한다. (자동로그인 등)

2) sessionStorage

- 윈도우나 브라우저를 닫는 경우 사라지며 뿐만 아니라 브라우저 내에서 탭을 생성하는 경우에도 별도의 영역으로 할당됨.

- 잠시동안 필요한 정보를 저장한다. (일회성 로그인 등)

3. 구현하기

1) src/Components/Login.js

- 소셜로그인 성공 시 받은 정보를 세션스토리지에 저장함.

import React, { Component } from 'react';

import { GoogleLogin } from 'react-google-login';

import KakaoLogin from 'react-kakao-login';

import styled from 'styled-components';

import { withRouter } from "react-router-dom";

class Login extends Component {

constructor(props) {

super(props);

this.state = {

id: '',

name: '',

provider: '',

}

}

// Google Login

responseGoogle = (res) => {

this.setState({

id: res.googleId,

name: res.profileObj.name,

provider: 'google'

});

this.doSignUp();

}

// Kakao Login

responseKakao = (res) => {

this.setState({

id: res.profile.id,

name: res.profile.properties.nickname,

provider: 'kakao'

});

this.doSignUp();

}

// Login Fail

responseFail = (err) => {

console.error(err);

}

doSignUp = () => {

    const { id, name, provider } = this.state;

window.sessionStorage.setItem('id', id);

window.sessionStorage.setItem('name', name);

window.sessionStorage.setItem('provider', provider);

this.props.onLogin();

this.props.history.push('/');

}

render() {

return (

<Container>

<GoogleLogin

clientId={process.env.REACT_APP_Google}

buttonText="Google"

onSuccess={this.responseGoogle}

onFailure={this.responseFail}

/>

<KakaoButton

jsKey={process.env.REACT_APP_Kakao}

buttonText="Kakao"

onSuccess={this.responseKakao}

onFailure={this.responseFail}

getProfile="true"

/>

</Container>

);

}

}

const Container = styled.div`

display: flex;

flex-flow: column wrap;

`

const KakaoButton = styled(KakaoLogin)`

padding: 0;

width: 190px;

height: 44px;

line-height: 44px;

color: #783c00;

background-color: #FFEB00;

border: 1px solid transparent;

border-radius: 3px;

font-size: 16px;

font-weight: bold;

text-align: center;

`

export default withRouter(Login);

2) src/App.js

- componentDidMount함수에서 세션스토리지에 id가 있는 경우 onLogin함수를 실행하고 없을 경우에는 onLogout함수를 실행하여 로그인을 유지함.

- 또한 로그아웃 시, 소셜로그인으로 부터 전달받은 토큰을 제거하고 세션스토리지에 저장된 정보를 모두 삭제한다.

import React, { Component } from 'react';

import styled from 'styled-components';

import Header from './Layout/Header';

import Navigation from './Layout/Navigation';

import Router from './Routes/Router';

import Store from './Store/store';

class App extends Component {

constructor(props) {

super(props)

this.state = {

logged: false,

onLogin: this.onLogin,

onLogout: this.onLogout

}

}

// Login Func

onLogin = () => {

this.setState({

logged: true

});

}

// Logout Func

onLogout = () => {

this.setState({

logged: false

});

const provider = window.sessionStorage.getItem('provider');

//Google AccessToken Remove

if(provider === 'google') {

const auth2 = window.gapi.auth2.getAuthInstance();

auth2.signOut().then(function() {

console.log('Goolge Logout.');

});

}

// Kakao AccessToken Remove

else if(provider === 'kakao'){

window.Kakao.Auth.logout(function() {

console.log("Kakao logout");

});

}

//SessionStorage Clear

window.sessionStorage.clear();

}

componentDidMount() {

const id = window.sessionStorage.getItem('id');

if(id) {

this.onLogin();

}

else {

this.onLogout();

}

}

render() {

const { logged, onLogout } = this.state;

return (

<Store.Provider value={this.state}>

<Layout>

<Header logged={logged} onLogout={onLogout}/>

<Navigation />

<Content>

<Router />

</Content>

</Layout>

</Store.Provider>

);

}

}

const Layout = styled.div`

margin: 0 auto;

display: flex;

width: 100%;

flex-flow: row wrap;

`

const Content = styled.div`

margin: 0 auto;

`

export default App;