0

私のコードのアナウンスのようなコンテンツにアクセスするにはトークンが必要です。しかし、私はloginUser()から生成されたトークンをコピーし、フェッチの下でgetAnnouncement()の中にペーストします。私はAuthorization: 'Bearer esuigiugeguigiguigi'と書いています< ---これがトークンです。この問題は、期限が切れるたびにトークンをコピーして貼り付ける必要があることです。トークンをApiから動的にコンテンツにアクセスするには

function loginUser(){ 

fetch('http://sample_website.com/api/auth/login', { 
    method: 'POST', 
    headers: {'Content-Type': 'application/json'}, 
    body: JSON.stringify({ 
     email: document.getElementById("email").value, 
     password: document.getElementById("password").value 
    }) 
}) 
.then(data => data.json()) 
.then(data => { 

    if(data.response){ 
     redirect: window.location.replace("../Sample/Home.html") 
    } else{ 
     alert("Invalid Email or Password"); 
    } 
}) 
.catch((err) => { 
    console.error(err); 
}) 

}

function getAnnouncement(){ 

fetch('http://sample_website.com/api/announcements', { 
    method: 'GET', 
    headers: {'Content-Type': 'application/json', 
    Authorization : 'Bearer esuigiugeguigiguigi'},  
}) 
.then(data => data.json()) 
.then(data => { console.log(data) 

     const output = document.getElementById("display"); 
     output.innerHTML = `<ul> 
         <li><h2>${data.data.data[0].title}</h2></li> 
         <li>${data.data.data[0].body}</li> 
         <li>Created: ${data.data.data[0].created_at}</li> 
         </ul>`; 

}) 
.catch((err) => { 
    console.error(err); 
}) 

}

答えて

1

通常トークンを取得するためのAPI呼び出しからの応答が開催されます:

  • トークン
  • TOKEの期間
  • トークンをリフレッシュするリンク

これを処理する基本的な方法の1つは、トークンデータをlocalStorageやメモリなどに保存することです(あなた自身で決定することができます)。承認が必要です。

トークンの有効期限が切れた場合、問題のAPIが特定のエラーを返す可能性があります。それを捕まえてリンクを使って新しいトークンを取得し、要求を繰り返すことができます。

APIが手元にあるか、何をやっているのか、使用しているフレームワーク(あれば)が何であれ、これは私が現時点で提供できる最良の答えです。すでにこのようなことを扱っているライブラリがたくさんあるので、既存のソリューションも調べてみることをお勧めします。

関連する問題