Django-rest-authでuserをGETする方法

# Django rest auth でuserをGETするには
こんにちは。Qiita初投稿のH-goto16です。

みなさんはDjango REST Frameworkを使っていますか。
DjangoとReactの連携をした際にDRFを用いてアプリケーションを作りました。
その時に、Djangoのほうではuser情報が簡単にとれるのにAxiosなどでGETするとエラーが出てしまうことはありませんか？

Django-rest-authの公式ドキュメントを読んでも解決しなかった。（書いてなかった）ため、ここでやり方を紹介します。

ここではDjango-rest-authについての具体的なインストール方法や使い方については触れません。
あらかじめインストールされたという前提です。

環境
Windows11 Pro
WSL2 Ubuntu20.04
Docker 20.10.16
docker-compose 1.29.2
Django 3.1.2
djangorestframework 3.12.2
django-rest-auth 0.9.5
django-allauth 0.43.0

 ## 準備

まずは http://localhost:8000/rest-auth/login/　
にアクセスして、ログインを行ってください。
アカウントを登録していない場合は /rest-auth/registration/ にアクセスして登録をしてください。
![スクリーンショット (42).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/aeaf7427-7546-75c0-6067-7dca15bdabf2.png)
ログインをするとKeyが返ってきます。


そして、http://localhost:8000/rest-auth/user/
にアクセスすると。
![user details.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/91e8d12e-fc12-9459-5c00-7ab522ea5f91.png)
こういった画面になると思います。もしくは
![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/0b34d93f-2e64-96d4-c378-659c6627a23b.png)
この画面になると思います。

ここから外部からAPIでUserの情報を取得しましょう。

## 方法

それでは、まずは`Python`で実装していきたいと思います。

~~~Python
import json
import requests

response = requests.get("http://localhost:8000/rest-auth/user/")
print(json.loads(response.text))
~~~
としてみましょう。すると、
~~~shell
{'detail': '認証情報が含まれていません。'}
~~~
と返ってきます。これでおそらく解決しなかった人が多いと思います。
### 解決方法

~~~Python
import json
import requests

header = {"Authorization": "Token 1546b71af7249430ec6bfe69506d144459a21034"}

response = requests.get("http://localhost:8000/rest-auth/user/", headers=header)
print(response)
print(json.loads(response.text))
~~~

ヘッダーに認証情報を追記する必要があります。

~~~Python
{"Authorization": "Token 1546b71af7249430ec6bfe69506d144459a21034"}
~~~
の部分ですが、必ずTokenのあとは半角スペースを空けてください。

では実行してみます。
~~~shell
{'pk': 6, 'username': 'test0000', 'email': 'test0000@gmail.com', 'first_name': '', 'last_name': ''}
~~~
こんな風にレスポンスされます。
これでうまく取得することができました。あとは煮るなり焼くなりしてjsonを抽出するだけです。

## Reactとの連携

ではReactで書いてみましょう。ここでは`Typescript`と`Axios`を使用します。

~~~typescript
import React, { useEffect, useState } from "react";
import axios from "axios";

export const Home: React.FC = () => {
  const [user, setUser] = useState("");
  const urlUser = "http://localhost:8000/rest-auth/user/";

  function getCookieArray() {
    const arr: any = new Array();
    if (document.cookie != "") {
      const tmp = document.cookie.split("; ");
      for (var i = 0; i < tmp.length; i++) {
        var data = tmp[i].split("=");
        arr[data[0]] = decodeURIComponent(data[1]);
      }
    }
    return arr;
  }

  const arr = getCookieArray();

  useEffect(() => {
    axios
      .get(urlUser, {
        headers: {
          Authorization: "Token " + arr["name"],
        },
      })
      .then(res => {
        setUser(res.data.username);
      });
  }, []);


以下略

  

~~~

ここで
~~~typescript
axios
      .get(urlUser, {
        headers: {
          Authorization: "Token " + arr["name"],
        },
      })
      .then(res => {
        setUser(res.data.username);
      });
~~~

ここのheadersとAuthorizationを記述すれば取得できると思います。

ちなみに今回ではcookieに保存してあるデータからログインをしています。
要望があればやり方をまた追記します。
~~~typescript
arr["name"]
~~~
はログインした後に返されるキーです。
## まとめ
headerを追加する。
Authorization Token "key"を書く。
この二つでuser情報を取得することができます。

最後まで読んでいただきありがとうございました。