Javascriptを使用したDjango Rest Framework APIへのアクセス - トークンの取得

Question

Django Rest Frameworkを使用したAPI設定があります。 cURLまたはHTTPie、またはブラウズ可能なAPIを使用してアクセスするとうまく動作します。 APIにはトークン認証がありますので、最初にトークンを返す資格情報を指定する必要があります。あなたがこれを行うだろうHTTPieを使用して（あるいはカール）：

http POST http://127.0.0.1:8000/api/v1/api-token-auth/ username="user1" password="testpassword" 

これは、応答などを返します：

HTTP/1.0 200 OK 
Allow: POST, OPTIONS 
Content-Type: application/json 
Date: Sun, 03 Sep 2017 16:57:38 GMT 
Server: WSGIServer/0.2 CPython/3.6.1 
X-Frame-Options: SAMEORIGIN 

{ 
    "token": "fgfdgfdgfdgfdgd45345345lkjlj" 
} 

あなたがそのようにのようななど/トークンを取り、GET/PUSHを実行します：

http --json POST http://127.0.0.1:8000/api/v1/test/ test_text="Testing" 'Authorization: Token fgfdgfdgfdgfdgd45345345lkjlj' 

私はGoogleが今しばらく探してきたし、上記の2行はJavascriptに変換する方法をするなど、明確な答えを見つけることができませんか？方法（1）トークンを取得するために資格情報を渡す。 （2）トークンを取得する。 （3）トークンを使ってGETとPUSHを要求しますか？

Answer 1

私はあなたがアヤックスを使用する必要があります同意するものとします。あなたはあなたの非常に最初にAJAX呼び出しを必要とする

はAPP：

var data = {username:'user',password:'password'} 

$.ajax({ 
     type: 'POST', 
     data: data, 
     url: 'http://your_url', 
     success: function(res){ 
       console.log(res) 
       $.ajaxSetup({ 
        headers: { 
        "token": res.token 
        } 
       }); 
     }, 
     error: function(error) { 
      callbackErr(error,self) 
     } 
    }) 

Haven`tは、試験されたが、アイデアは、トークンを取得しにトークンを保存するために.ajaxSetupを使用してAjax呼び出しを使用しています次のすべてのajaxリクエストのヘッダー。

ザ・あなたはこれを行うことができます。

var data = {test_text="Testing"} 
$.ajax({ 
      type: 'POST', 
      data: data, 
      url: 'http://127.0.0.1:8000/api/v1/test/', 
      success: function(res){ 
        console.log(res) //answer of api call. 
        }); 
      }, 
      error: function(error) { 
       callbackErr(error,self) 
      } 
     }) 

それともこれを：

$.ajax({ 
      type: 'GET', 
      url: 'http://127.0.0.1:8000/api/v1/ANOTHER_TES/', 
      success: function(res){ 
        console.log(res) //answer of api call. 
        }); 
      }, 
      error: function(error) { 
       callbackErr(error,self) 
      } 
     }) 

変更コールのtypeパラメータをあなたの要求を変更します。

Answer 2

@Ticoの答えを参照してください。

トークンを取得するには、資格情報を渡します。 （2）トークンを取得する。 （3）トークンを使ってGETとPUSHを要求しますか？

$.ajax({ 
    type: 'POST', 
    data: { 
    username: "user1", 
    password: "testpassword" 
    }, 
    url: 'http://127.0.0.1:8000/api/v1/api-token-auth/', 
    success: function(res){ 
      $.ajaxSetup({ 
       headers: { 
       "token": res.token 
       }}); 
      $.ajax({ 
       type: 'POST', 
       data: { 
        test_text: "Testing" 
       }, 
       url: 'http://127.0.0.1:8000/api/v1/test/', 
       success: function(res){ 
        alert(res); 
       }}); 

    } 
}); 

Answer 3

投稿として、getや他のurl呼び出しは非同期呼び出しです。だから、プログラムの流れを維持し、ポストリクエストをするためには、あなたのポストコールを同期させるjsの約束の機能を使う必要があります。 js promise description

var data = {username:'user',password:'password'} 

$.ajax({ 
     type: 'POST', 
     data: data, 
     url: 'http://your_url', 
     success: function(res){ 
       console.log(res) 
       $.ajaxSetup({ 
        headers: { 
        "token": res.token 
        } 
       }); 
     }, 
     error: function(error) { 
      callbackErr(error,self) 
     } 
    }) 

あなたが約束を使用する必要があなたのプログラムとそれを同期させるために、あなたはあなたのプログラムの起動時にこれを使用しますが、これが非同期である場合、このコードは正常に動作します。 質問の3番目の部分については、これを行う必要があります。

$.ajax({ 
     type: 'GET', 
     url: 'http://your_url' + "/token=" + your_token, 
     success: function(res){ 
       console.log(res) 
     }, 
     error: function(error) { 
      callbackErr(error,self) 
     } 
    })