JWT Authentication【２０Home Link】

JWT Authentication【２０Home Link】

YouTube: https://youtu.be/18e5qtjihRQ

https://youtu.be/18e5qtjihRQ

今回はログインページやプロテクトページへのリンク、ユーザーの表示、
ログアウトのボタンの設置をホームページに実装します。

今回は主にスタイリングに時間がかかりますので、
こちらのコードのコピーでも大丈夫です！

src/pages/Home.tsx

import React from 'react'
import { useAuthContext } from '../context/authContext'
import { Link } from 'react-router-dom'

const Home = () => {
  const { user } = useAuthContext()

  return (
    <div className="container text-center p-5">
      <div className="text-4xl mb-3">Welcome Home {user && user.name}</div>
      <div className="flex justify-center">
        <Link
          to={'/login'}
          className=" bg-slate-700 text-white px-4 py-2 rounded"
        >
          login
        </Link>
        <div className=" bg-slate-700 text-white px-4 py-2 mx-3 rounded cursor-pointer">
          logout
        </div>
        <Link
          to={'/protected'}
          className=" bg-slate-700 text-white px-4 py-2 rounded"
        >
          protected
        </Link>
      </div>
    </div>
  )
}

export default Home