로그인/로그아웃

헤더변화

로그인/로그아웃 여부에 따라 nav 에 있던 로그인 글자에 변화를 주었다.
로그인을 하면 로그아웃으로,
로그아웃을 하면 로그인으로 글자가 변경되도록 하였다.

//src/components/Nav/index.tsx
(로그인/로그아웃과 관련없는 코드는 삭제)
import { useCookies, withCookies } from 'react-cookie';

interface NavProps {
  show?: boolean | undefined;
}

const Nav: React.FC<NavProps> = ({ show }) => {
  const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
  const logout = () => {
    removeCookie('accessToken');
    // 로그아웃시 쿠키에 있는 accessToken 삭제
  };
  const getCookie = cookies.accessToken;
  // 쿠키에 있는 accessToken 가져오기
  return (
    <NavContainer show={show}>
       (생략)
      </MenuWrapper>

      <AuthWrapper>
        <Link to='/login'>
          {getCookie != null ? (
            <AuthItem
              show={show}
              onClick={() => {
                logout();
              }}
            >
              로그아웃
            </AuthItem>
          ) : (
            <AuthItem show={show}>로그인</AuthItem>
          )}
        </Link>
        <Link to='/join'>
          <AuthItem show={show}>회원가입</AuthItem>
        </Link>
      </AuthWrapper>
    </NavContainer>
  );
};

export default Nav;

결과물

오른쪽 상단에 있는 로그인/로그아웃 글자를 보면 된다!

Protected Router

로그인한 유저만 접근할 수 있는 protected Router를 구현해보고 싶었다.
protected Router를 검색해보니 (내가 찾아봤을 당시는) 많은 사람들이 contextAPI를 통해 AuthProvider를 사용하던데, 그럼 나는 redux/toolkit을 쓰고 있으니 코드 변형을 해야겠군...

아니 근데 나는 그냥 쿠키에 accessToken 있는지 없는지만 파악하면 되는데 왜이렇게 복잡하지@-@ 생각하던 중, 내가 원하는 방식으로 풀어나간 분의 글을 발견해 생각보다 쉽게 구현할 수 있었다.

//src/routes/protectedRouter.tsx
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useCookies } from 'react-cookie';

function ProtectedRouter() {
  const [cookies] = useCookies(['accessToken']);
  const getCookie = cookies.accessToken;
  let auth = { token: getCookie };
  // auth는 현재 사용자의 토큰값을 가짐
  return auth.token ? <Outlet /> : <Navigate to='/' />;
}

export default ProtectedRouter;

auth.token 값이 존재하는 경우에만 Outlet을 렌더링할 수 있다.
존재하지 않을 경우에는 홈으로 리디렉션!
그리고 로 보호할 Outlet페이지는 Router.ts에서 감싸주면 된다!

//src/routes/Router.tsx
import {
  BrowserRouter,
  Routes,
  Route,
  RouterProps,
  Navigate,
} from 'react-router-dom';
import Layout from '@components/Layout';
import {
  NotFoundPage,
  Home,
  Join,
  Login,
  Photos,
  PlaylistPage,
  Subscribe,
} from '../pages';
import ProtectedRouter from './ProtectedRouter';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path='/' element={<Home />} />
          <Route path='/login' element={<Login />} />
          <Route path='/join' element={<Join />} />
          <Route path='/photos' element={<Photos />} />
          <Route element={<ProtectedRouter />}>
            // 로그인한 유저만 접근 가능
            <Route path='/subscribe' element={<Subscribe />} />{' '}
            <Route path='/playlist' element={<PlaylistPage />} />
          </Route>
          <Route path='*' element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

끝!