【Django】Pythonで作るRest API【２７Authorization Token】

【２７Authorization Token】

YouTube: https://youtu.be/Qt8RUlOyBKk

https://youtu.be/Qt8RUlOyBKk

今回はフロントエンド側でアクセストークンを設定して、
ユーザーのデータを取得します。

djangoから取得したアクセストークンは
「fetch」メソッドの第2引数の「headers」に設定します。

フロントエンドからログイン処理で
「http://localhost:8000/api/token/」
にリクエストを送って取得したトークンは、

ログイン処理が成功した場合に
Cookieやローカルストレージに格納します。
基本的には「httpOnly」の形でCookieに保存するのが一般的です。

django側で設定するのはカスタマイズが少し難しいので、
「express」や「NextJs」のAPIを使用して設定すると
比較的簡単に実装できるかと思います。

react-app/src/App.jsx

import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  // useEffect(() => {
  //   const getPosts = async () => {
  //     const res = await fetch('http://localhost:8000/posts/')
  //     const data = await res.json()
  //     console.log(data);
  //   }
  //   getPosts()
  // }, [])

  useEffect(() => {
    const getMe = async () => {
      const res = await fetch('http://localhost:8000/accounts/me/', {
        headers: {
          'Authorization': `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ........`
        }
      })
      const data = await res.json()
      console.log(data);
    }
    getMe()
  }, [])

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App