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

我需要有令牌才能访问代码中的内容，如公告。但我要做的是复制loginUser（）生成的令牌，并将其粘贴到fetch下的getAnnouncement（）中。我写了授权：“Bearer esuigigi”data.json（） .then（数据=>{console.log（数据） 常量输出=document.getElementById（“显示”）； output.innerHTML=`

• ${data.data.data[0].title}
• ${data.data.data[0].body}
• 已创建：${data.data.data[0]。已在}创建{u

`； }) .catch（（错误）=>{ 控制台错误（err）； })

---

}

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

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

处理这一问题的一种基本方法是将令牌数据保存在本地存储或内存或其他地方（您可以自己决定），然后在任何需要授权的请求上使用它

在令牌过期的情况下，有问题的API可能会给出特定错误。然后，您可以捕获它，使用链接刷新令牌以获取新令牌，然后重复请求

由于手头没有太多关于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);
})