✨ 로그인 시 접근 제한

사용자의 로그인 상태에 따라 페이지 접속을 허용/차단하는 기능을 구현할 것이다.
먼저 localstorage에서 토큰 유무를 조회하여 사용자의 로그인 상태를 검증할 것이다.
로그인한 사용자일 경우, 로그인과 회원가입 페이지에 접근을 차단한다.
로그인하지 않은 사용자일 경우, 서비스를 이용하지 못하고 로그인 페이지로 Redirection할 것이다.

토큰 유무 조회

로그인 시 토큰 저장 : Storage.setItem()

const submitLogin = async () => {
    try {
		...
        localStorage.setItem('Token', json.user.token);
        localStorage.setItem('accountname', json.user.accountname);
      }
    } catch (err) {
      setError(true);
      console.log(err);
    }
  };

Storage.setItem() 메서드를 사용해 로그인에 성공할 경우, 로컬 스토리지에 Token(토큰)과 accountname(계정명)을 저장하도록 코드를 짰다.

storage.setItem(keyName, keyValue);

관리자도구>Application>Local Storage 에 들어가면
Token, accountname이 저장되어있는 것을 확인할 수 있다.

로그인 검증 함수 모듈화

getItem() 메서드를 활용해 Token 유무를 검증하는 함수를 만들고 모듈화했다.

export const isLogin = () => !!localStorage.getItem('Token');

Route 접근 제한

Route 는 요청 경로와 렌더링할 컴포넌트를 설정한다.
그리고 Redirect 는 요청 경로를 다른 경로로 redirection한다.
이를 활용해 Route를 PrivateRoute와 PublicRoute로 커스텀할 것이다.
PrivateRoute에 로그인하지 않은 사용자가 접근할 경우 /login 페이지로 redirection 한다.
PublicRoute에 로그인한 사용자가 접근할 경우 /home 페이지로 redirection 한다.

PrivateRoute : 로그인 안한 사용자 접근 제한

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../../../utils/isLogin';

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLogin() ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

export default PrivateRoute;

PublicRoute : 로그인한 사용자 접근 제한

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../../../utils/isLogin';

const PublicRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLogin() ? <Redirect to="/home" /> : <Component {...props} />
      }
    />
  );
};

export default PublicRoute;

App.js

import { BrowserRouter, Switch } from 'react-router-dom';
import PrivateRoute from './pages/Login/components/PrivateRoutes';
import PublicRoute from './pages/Login/components/PublicRoute';

function App() {
  
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <PublicRoute path="/login" exact component={Login} />
          <PublicRoute path="/join" exact component={join} />
          <PrivateRoute path="/profile" exact component={profile} />
          <PrivateRoute path="/upload" exact component={upload} />
          <PrivateRoute path="/product" exact component={product} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

App.js에 커스텀한 PrivateRoute 와 PublicRoute를 가져와 선언했다.

📸 기능 구현 화면

로그인 시 진입방지

로그아웃 시 진입방지

🔗 참고 링크

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
https://medium.com/@thanhbinh.tran93/private-route-public-route-and-restricted-route-with-react-router-d50b27c15f5e
https://v5.reactrouter.com/web/api/Redirect
https://jeonghwan-kim.github.io/dev/2019/07/08/react-router-ts.html