React URL 직접 접근 막기
Why?
로그인 한 사용자와 로그인 하지 않은 사용자가 접근할 수 있는 페이지가 다르다.
그렇기 때문에 비정상적인 URL 직접 접근을 막아 웹 프로그램의 예측하지 못한 에러를 방지하는 것이 필요하다.
How
-
Public Route는 로그인하지 않은 사용자에게 공개된 URL을 관리
-
Restricted 옵션의 유무를 통해서, 로그인 페이지, 회원가입 페이지 등 로그인 사용자가 접근하지 말아야 할 주소에 접근을 제한
-
Private Route는 로그인한 사용자에게만 접근이 허용된 URL을 관리하여 로그인하지 않는 사용자가 접속할경우 로그인페이지로 리다이렉트
Where
컴포넌트 추가
-
Public Route 컴포넌트와 Private Route 컴포넌트를 다음과 같이 추가
-
각각의 라우터 안에는 isLogin()이라는 메소드를 통해 사용자가 로그인 한 상태인지 확인
-
즉, 이 isLogin() 메소드를 통해 접근 권한을 판단
-
Public Route는 접근 권한이 없을 때 메인 페이지로 Redirect 하게 되고
-
Private Route는 접근 권한이 없을 때 로그인 페이지로 Redirect
/lib/PublicRoute.js
const PublicRoute = ({ component: Component, restricted, ...rest }) => {
return (
<Route
{...rest}
render={(props) => (isLogin() && restricted ? <Redirect to="/" /> : <Component {...props} />)}
/>
);
};
export default PublicRoute;
/lib/PrivateRoute.js
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
// Show the component only when the user is logged in
// Otherwise, redirect the user to /login page
<Route
{...rest}
render={(props) => (isLogin() ? <Component {...props} /> : <Redirect to="/login" />)}
/>
);
};
export default PrivateRoute;
/lib/isLogin.js
-
isLogin() 메소드에서는 localStorage에 저장된 accessToken의 존재 여부에 따라 로그인 상태를 판별
-
(참고사항) accessToken의 유효성에 대한 검사는 API 서버에서 이루어지며, axois.interceptor에서 401 unauthorized 응답을 받은 경우 로그인 페이지로 Redirect 시키기 때문에 로그인 상태 판별은 accessToken의 여부로만 판단이 가능하다고 생각
const isLogin = () => !!localStorage.getItem('accessToken');
export default isLogin;
Conclusion
-
다음은 URL 접근 제한이 적용된 소스 코드
-
원래 Route의 형식을 흐트려뜨리지 않으며 URL 접근제한을 적용할 수 있다.
URL 직접 접근이 허용된 코드(적용 전)
- sidebar/src/routes.js
const routes = () => (
<Switch>
<Route exact path={pathURI.login} component={LoginPage} />
<Route exact path={pathURI.register} component={RegisterPage} />
<Route exact path={pathURI.myBucketList} component={MyBucketListPage} />
<Route exact path={pathURI.myBucketListDetail} component={MyBucketListDetailPage} />
<Route exact path={pathURI.bucketcreate} component={BucketCreatePage} />
<Route exact path={pathURI.achieveCreate} component={AchieveCreatePage} />
<Route exact path={pathURI.feed} component={FeedPage} />
<Route exact path={pathURI.setting} component={SettingPage} />
<Route exact path={pathURI.logout} component={LogoutPage} />
<Route exact path={pathURI.follow} component={FollowListPage} />
<Route exact path={pathURI.userInfo} component={UserInfoPage} />
</Switch>
);
URL 직접 접근 제한을 적용한 코드(적용 후)
- sidebar/src/routes.js
const routes = () => {
return (
<Switch>
<PublicRoute restricted component={LoginPage} path={pathURI.login} exact />
<PublicRoute restricted component={RegisterPage} path={pathURI.register} exact />
<PrivateRoute component={MyBucketListPage} path={pathURI.myBucketList} exact />
<PrivateRoute component={MyBucketListDetailPage} path={pathURI.myBucketListDetail} exact />
<PrivateRoute component={BucketCreatePage} path={pathURI.bucketcreate} exact />
<PrivateRoute component={AchieveCreatePage} path={pathURI.achieveCreate} exact />
<PrivateRoute component={FeedPage} path={pathURI.feed} exact />
<PrivateRoute component={SettingPage} path={pathURI.setting} exact />
<PrivateRoute component={LogoutPage} path={pathURI.logout} exact />
<PrivateRoute component={FollowListPage} path={pathURI.follow} exact />
<PrivateRoute component={UserInfoPage} path={pathURI.userInfo} exact />
</Switch>
);
};
구현 소스
Author And Source
이 문제에 관하여(React URL 직접 접근 막기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jangky000/React-URL-직접-접근-막기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)