JWT Authentication【２２Protected Redirect】

JWT Authentication【２２Protected Redirect】

YouTube: https://youtu.be/Tf0iNhCkWP4

https://youtu.be/Tf0iNhCkWP4

今回はログイン状態ではない時にプロテクテッドページから
ログインページに遷移させる部分の実装になります。

こちらは前回作成したログインリダイレクトのコンポーネントを
流用して作成しようと思います！

src/components/ProtectedRedirect.tsx

import { ReactNode, FC } from 'react'
import { useAuthContext } from '../context/authContext'
import { Navigate } from 'react-router-dom'

interface Props {
  children: ReactNode
}

const ProtectedRedirect: FC<Props> = ({ children }) => {
  const { user } = useAuthContext()

  if (!user) {
    return <Navigate to={'/login'} />
  } else {
    return <>{children}</>
  }
}

export default ProtectedRedirect

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css'
import LoginRedirect from './components/LoginRedirect'
import ProtectedRedirect from './components/ProtectedRedirect'
import Home from './pages/Home'
import Login from './pages/Login'
import Protected from './pages/Protected'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/login"
          element={
            <LoginRedirect>
              <Login />
            </LoginRedirect>
          }
        />
        <Route
          path="/protected"
          element={
            <ProtectedRedirect>
              <Protected />
            </ProtectedRedirect>
          }
        />
      </Routes>
    </BrowserRouter>
  )
}

export default App