[TIL_개발일기_210314] Public Key Retrieval is not allowed 에러 해결 / Auth(HOC)

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

java.sql.SQLNonTransientConnectionException : Public Key Retrieval is not allowed 에러 해결

MySql이 8.x 이상인 경우 발생하는 에러로, jdbc url에 allowPublicKeyRetrieval=true 설정을 추가해주어야 한다고 한다. 

 

그런데 나의 경우는, 저 설정 뿐만 아니라(기존에 설정되어 있던 'useSSL=false' 외에) 'useUnicode=true'와 'characterEncoding=UTF-8'도 추가로 설정해주니 에러가 해결되었다. 

 

spring.datasource.url=jdbc:mysql://localhost:3306/db-name?useUnicode=true&characterEncoding=UTF-8&allowPublicKeyRetrieval=true&useSSL=false

 

Auth(HOC)

회원가입과 로그인 기능을 제공하는 리액트 사이트를 만들고 있다. 그렇다보니 누구나 진입이 가능한 페이지도 있고, 로그인한 회원만 진입이 가능한 페이지, 로그인한 회원은 진입하지 못하는 페이지가 있다. 이때, 인증을 위해 HOC, High Order Component function을 사용한다. 

 

High Order Component function는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수이다. 서버로부터 응답 받은 유저의 상태(로그인/로그아웃/관리자)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지의 인증을 컨트롤할 수 있다.

 

src/hoc/auth.js에 다음과 같은 파일을 만든다. 

 

import { useEffect } from 'react';
import { useSelector } from 'react-redux';

export default (Component, option, adminRoute = null) => {
    /*
    option: null => 누구나 출입가능한 페이지
          : true => 로그인한 유저만 출입가능한 페이지 
          : false => 로그인한 유저는 출입 불가능한 페이지 
    */

    const AuthenticateCheck = (props) => {
        const isLoggedIn = useSelector((state) => state.user.isLoggedIn);

        useEffect(() => {
            // 로그인 되어 있지 않다면, logOutMain으로 이동시키기
            if (!isLoggedIn && option) {
                props.history.push('/');
            }
        }, []);

        return <Component />;
    };

    return AuthenticateCheck;
};

 

 

이제 인증이 필요한 페이지에 다음과 같이 적용해준다. 두 번째 인자가 option이고, option이 null이면 누구나 출입 가능한 페이지, true면 로그인한 사용자만 출입 가능한 페이지, false면 로그인한 사용자는 출입할 수 없는 페이지가 된다. 

 

import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Auth from './hoc/auth';
import LogOutMain from './components/LogOutMain';
import Main from './components/Main';
import LogInPage from './components/LogInPage';
import SignUpPage from './components/SignUpPage';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Auth(LogOutMain, false)} />
                <Route exact path="/login" component={Auth(LogInPage, false)} />
                <Route exact path="/signup" component={Auth(SignUpPage, false)} />
                <Route exact path="/main" component={Auth(Main, true)} />
                <Route path="/*">404 Not Found</Route>
            </Switch>
        </Router>
    );
};

export default App;