token값 응답 객체에 담기, 라우팅(2021.01.27)

안녕하세요! 새콤하고달콤입니다.

오늘은 token값 응답 객체에 담기, 라우팅, UI/UX 만들기, 컴포넌트 제작을 진행해보았습니다.

 

1. token값 응답 객체에 담기

먼저 백엔드에서 넘겨준 header 정보에 token이 담겨있는 줄 알고 기대했었는데 담겨있지 않았습니다.

흠.. 이상하다 생각해서 network 탭에서 확인해보니까 network 탭에서는 잘 찍혀있었습니다.

 

 

구글링 결과 서버쪽에서 header를 추가해야되는데 아래의 header를 추가하면 됩니다.

아래의 header는 응답 객체에 옵션을 보여주는 옵션이라고 생각하면 됩니다.

headers.set("token", userService.jwtLogin(jwtLoginDTO.getCode(), jwtLoginDTO.getOauthId()));
headers.set("Access-Control-Expose-Headers", "token");

 

2. 라우팅 

라우팅을 위해서 react-router-dom을 새로 설치하였습니다.

npm install --save-dev react-router-dom @types/react-router/dom

 

먼저 App 컴포넌트에 라우팅 경로를 설정합니다.

 

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import LoginPage from '@src/pages/LoginPage';
import PlayGroundPage from '@src/pages/PlayGroundPage';

const App = () => {
	return (
		<>
			<Router>
				<Switch>
					<Route exact path="/" component={LoginPage} />
					<Route exact path="/playground" component={PlayGroundPage} />
				</Switch>
			</Router>
		</>
	);
};
export default App;

 

그리고 useLayoutEffect를 이용해서 렌더링 전에 token을 받고 라우팅 해줍니다.

받은 token은 localStorage에 저장하였습니다.

const history = useHistory();
	useLayoutEffect(() => {
		const local = location.search;
		const params = queryString.parse(local);
		const options = {
			mode: 'cors',
			credentials: 'include',
			headers: {
				'Content-Type': 'application/json',
				'Access-Control-Allow-Origin': '*',
			},
		};

		if (Object.keys(params).length > 0) {
			const getToken = async () => {
				const v: any = await axios
					.post('http://localhost:8080/jwtLogin', params, options)
					.then((response) => {
						localStorage.setItem('token', response.headers.token);
					});
			};
			getToken();
			history.push('/playground');
		}
	}, []);