DjangoAPI⇆ReactのSPAにおける認証周りについて

DjangoRESTFramework(以下DRF)とReactでSPAを学習の初学者です。
単純なTodoを投稿するアプリなのですが、ユーザー認証周りで躓いております。
さしあたっていくつか質問させていただければと思います。

###現在の状況
・ReactからのHTTPリクエストはaxiosを使用
・DjangoデフォルトのUserモデルと、自前のPostモデルがあり、1対多でリレーションしている
・django-rest-authによってLogin,Logoutなどの諸機能を追加している
・DRFのデフォルトUIでLoginのURLへ移動しログインを行うとkeyが帰ってくる

###やりたいこと

Postモデルにデータを追加する際、
ログイン中のユーザーを識別できる情報をPOSTリクエストで送信、Postモデルのuserカラム(ForeignKey)へ格納したい

###試している方法
Login時にDRFから返されるkeyを
React側のstateに格納、
axiosのPOSTリクエスト時にヘッダーに含める

login
1    login(username, email, password){
2        axios({
3            method : 'POST',
4            url    : 'http://localhost:8000/api/v1/rest-auth/login/',
5            data   : {username: username, email: email, password: password},
6        })
7        .then(res=>{
8            this.setState({key: res.data}); // keyにログイン時にreturnされたトークンを設定
9            console.log(res);
10        })
11        .catch(err => {
12            console.log(err);
13        });
14    }

addPost
1    addPost(body){
2        axios({
3            method : 'POST',
4            url    : 'http://localhost:8000/api/new/',
5            data   : {body: body},
6            headers: {'X-CSRFTOKEN': this.state.key },
7        })
8        .then(() => {
9            this.getPosts();
10        })
11        .catch(err => {
12            console.log(this.state.key);
13            console.log(err);
14        });
15    };

###エラー内容
403が帰ってくる
具体的には

devtoolNetwork
1{"detail":"認証情報が含まれていません。"}

とGoogleDevツールのNetworkタブに表示されていますが、
同じくdevツール上で送られたリクエストのヘッダーを確認すると

X-CSRFTOKEN: 4171929a6fbda923328dd1efbaa456ce940e726a0e　//(例)

のように期待したstateのkey値が送信されているようでした。

###質問
①何故認証がうまくいかないのでしょうか
調べて考えてみた結果、
・トークンの渡し方が間違っている
・利用するトークンが間違っている
・根本的なアプローチ自体が間違っている
上記どれかなのではないかと思っているのですが、
行き詰まってしまったのでご教授いただきたいです。

②今回のようなSPAでユーザーのログイン状態を管理する際のアプローチについて
発行されたkeyをStateに保存することでセッション管理を行おうと考えているのですが、
大雑把に言えばこれは間違っているでしょうか？
間違っている場合、お手数ですが一般的に用いられている方法について合わせてご教授いただきたいです。

拙い質問になってしまっているかもしれませんが、アドバイスやご指摘いただけると非常に助かります。
どうかよろしくお願いいたします。

以下にAPI側のコードを一部添付いたしますが、その他必要な情報があれば随時追加させていただきます。

view
1class PostCreateAPIView(generics.CreateAPIView):
2    queryset = Post.objects.all()
3    serializer_class = PostSerializer
4
5    def perform_create(self, serializer):
6        serializer.save(user=self.request.user)

追記：タイトルが当初質問予定だった物のままでしたので、修正いたしました。
DjangoAPI⇆ReactのSPAにおけるリレーションについて
↓
DjangoAPI⇆ReactのSPAにおける認証周りについて

行動規範の内容に同意します

回答1件

ベストアンサー

これってトークン認証だと思いますが、その場合は

Authorization: Token 4171929a6fbda923328dd1efbaa456ce940e726a0e

というヘッダーを送る必要があり、つまり addPost では

            headers: {'Authorization': 'Token ' + this.state.key },

とすればいいのではないでしょうか。（試してないので、間違ってたらごめんなさい。）
参考: トークンの発行 - Django REST frameworkについての雑記 - Qiita

X-CSRFTOKEN はセッション認証（普通の HTML フォームでログインした時のように Cookie で認証する）時の CSRF 防止用で、Cookie は外部からのリンクとかでも勝手に送られるため悪用が可能で、それを防ぐためのものだと思います。
参考: CSRFとは何か - 3分でわかるXSSとCSRFの違い - Qiita
参考: Django Rest Frameworkの便利さを理解する - Qiita

投稿2020/03/08 06:54