[React] Router Custom, Router를 사용한 사용자 권한 체크

로그인 기능을 갖춘 페이지 구현시, URL 에 경로를 입력해서 들어오는 비정상적 접근을 차단해야하는 경우 사용할 수 있음

 

 return (
        <div className="root" id="root">
            <div className="wrap">
          
                <section>
                    <Route exact path="/" component={SignIn} />
                    <Switch>
                   		 <RouteAuthChek path="/temp" component={Temp} auth={AUTH} url={"temp"} />
                   </Switch>
                </section>
      
            </div>
        </div>
    );
}

const RouteAuthChek = ({ auth, url, component: Component, ...rest }) => {
    //redux 불러오기

    const [show, setShow] = useState(false);

    return (
        <Route
            {...rest}
            render={(props) => {
                // DB에서 권한 체크
                axios
                    .post(`${db}/path...`, { auth: auth, url: url })
                    .then((response) => {
                        setShow(response.data);
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                    .finally(() => {});

                if (show && Component) {
                    return <Component {...props} />;
                } else {
                     return <ErrorPage {...props} />;
                }

                return null;
            }}
        />
    );
};

Router을 커스텀해서 사용 가능