动态从Api获取令牌以访问内容

Question

我需要令牌来访问内容，例如代码中的公告。 但是我要做的是复制从loginUser（）生成的令牌，并将其粘贴到fetch下的getAnnouncement（）中。 我写了授权：'bearer esuigiugeguigiguigi'<---这是令牌。 问题在于，每次令牌到期时，我都需要再次复制并粘贴令牌。

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);
})

}

Answer 1

通常，来自API调用以获取令牌的响应将保持：

• 令牌
• 代币的持续时间
• 刷新令牌的链接

一种基本的处理方法是将令牌数据保留在localStorage或内存中（可以自己决定），然后将其用于需要授权的任何请求。

如果令牌已过期，则相关的API可能会给出特定的错误。 然后，您可以捕获它，使用链接刷新令牌以获取新令牌，然后重复请求。

由于手头上没有太多有关该API的信息，或者您正在做什么以及正在使用什么框架（如果有），这是我目前能提供的最佳答案。 有很多库已经在处理这些东西，因此您可能也想研究现有的解决方案。