JWT Authentication【２１Login Redirect】

JWT Authentication【２１Login Redirect】

YouTube: https://youtu.be/zL-XUkuH4E8

https://youtu.be/zL-XUkuH4E8

今回はログイン状態の時にログインページから
ホームページに遷移させる部分の実装になります。

やり方はいろいろあるのですが、
今回はシンプルにリダイレクト用のコンポーネントを作成して、
ログインページのコンポーネントをラップしてあげる形で実装します。

src/components/LoginRedirect.tsx

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

interface Props {
  children: ReactNode
}

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

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

export default LoginRedirect

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css'
import LoginRedirect from './components/LoginRedirect'
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={<Protected />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App