로그인 유지

새로고침을 해도 로그인을 유지하기 위해서 react-redux를 이용했다.

isLogin이라는 상태값을 만들어서 기본값을 false로 하고 loacalStorage에 token값이 있는지 확인하고 token이 있는 경우에는 action을 전달해서 isLogin의 값을 true로 변경해서 로그인을 유지할 수 있다. 그리고 token값이 없거나 로그아웃으로 token을 삭제한 경우 isLogin이 false가 되어 로그인 화면으로 돌아가게 하는 것을 목표로 만들었다.

react-redux의 store와 action, reducer

처음으로 react-redux를 구현하기때문에 한 파일에 전부 구현을 한 후 action, reducer, store로 나누기로 했다.

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const LOGINCHECK = 'logincheck';
const LOGOUTCHECK = 'logoutcheck';

export const loginCheck = () => {
	return {
		type: LOGINCHECK,
	};
};

export const logoutClickevent = () => {
	console.log('logoutaction');
	return {
		type: LOGOUTCHECK,
	};
};

const initialStore = { isLogin: false };

const reducer = (state = initialStore, action) => {
	switch (action.type) {
		case LOGINCHECK:
			return { ...state, isLogin: true };
		case LOGOUTCHECK:
			console.log('enter');
			return { ...state, isLogin: false };
		default:
			return state;
	}
};

const store = createStore(reducer, composeWithDevTools());

export default store;

Login 유지

로그인을 하고 새로고침을 하면 react-redux에서 isLogin이 false로 기본값이 되어 있어서 true로 변경을 해줘야 로그인이 유지가 될 수 있다. useEffect를 이용해서 localStorage에 token이 있는 경우 action을 전달해서 isLogin을 true로 변경해줬다. useEffect의 두번째인자에 []을 넣어서 반복해서 확인하는 것을 방지하고 처음한번만 확인하게 해줬다.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { loginCheck } from './modules/actions/changeLoginStatus';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ListPage from './pages/ListPage';
import Login from './pages/LoginPage';
import GlobalStyles from './components/GlobalStyles';

function App() {
	const dispatch = useDispatch();
	const isLogin = useSelector((state) => state.changeLoginStatus.isLogin);
	console.log('isLogin', isLogin);
	const localStoragetokenCheck = localStorage.getItem('token');

	useEffect(() => {
		if (localStoragetokenCheck) {
			// 로그인유지를 위해서 isLogin을 true로 변경해줘야한다.
			dispatch(loginCheck());
		}
	}, []);

	return (
		<>
			<Router>
				<Switch>
					{isLogin ? (
						<Route path="/" component={ListPage}></Route>
					) : (
						<Route path="/" exact component={Login}></Route>
					)}
				</Switch>
			</Router>
			<GlobalStyles />
		</>
	);
}

export default App;

Logout

로그아웃 버튼을 클릭하면 localStorage에 저장되어 있는 token을 삭제하고 dispatch를 이용해서 isLogin을 false로 바꿔준다.

import React from 'react';
import { useDispatch } from 'react-redux';
import { logoutClickevent } from '../modules/actions/changeLoginStatus';
import styled from 'styled-components';

const Header = () => {
	const dispatch = useDispatch();
	return (
		<Nav>
			<LogoWrap>
				<Logo></Logo>
			</LogoWrap>
			<LogoutBtn
				onClick={() => {
					localStorage.removeItem('token');
					dispatch(logoutClickevent());
				}}
			>
				LOGOUT
			</LogoutBtn>
		</Nav>
	);
};

export default Header;