Javascript 如何使用fetch在前端存储和处理JWT令牌，以及如何存储它？

我是开发新手，我有一个任务管理器应用程序，我在其中使用JWT令牌进行验证，我可以让它在Postman上工作，但我不知道如何通过浏览器存储它并将其发送到服务器

下面是我试图使其工作的步骤，但它在事件侦听器外部表示未定义，并且我无法存储令牌以稍后将其发送到另一个url，我正在将令牌发送到API

以下是我的前端app.js代码，对于登录页面，登录时向用户发送JWT令牌：

let inMemoryToken;


const signInForm = document.querySelector( "#sign-in-form" );
signInForm.addEventListener( "submit", ( e ) => {
    const email = document.querySelector( "#login-email" ).value;
    const password = document.querySelector( "#login-pass" ).value;
    e.preventDefault();
    console.log( email, password );
    fetch( "http://localhost:3000/users/login", {
        method: 'post',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify( {

            "email": email,
            "password": password,

        } )
    } ).then( res => res.json() )
        .then( res => {
            console.log( res );
            let inMemoryToken = res.token;
            console.log( inMemoryToken );
            // { Authorization: `Bearer  ${ inMemoryToken }`; }
            return inMemoryToken;
        } );

    console.log( inMemoryToken );

    
 return inMemoryToken;
} );
// inMemoryToken = res.body.token[ 0 ];
// let inMemoryToken2 = inMemoryToken;

console.log( inMemoryToken );

我登录的后端代码是：

router.post( "/users/login", async ( req, res ) => {
    try {
        const user = await User.findByCredentials(
            req.body.email,
            req.body.password
        );
        const token = await user.generateAuthToken();
        res.send( {
            user,
            token,
        } );
    } catch ( e ) {
        res.status( 400 ).send( {
            error: "Catch error",
            e,
        } );
    }
} );

另外，在获得此令牌后，我希望将其传递到我的任务url，如下所示：

const TaskForm = document.querySelector( "#add-tasks" );
TaskForm.addEventListener( "submit", ( e ) => {
    const task = document.querySelector( '#task' ).value;
    e.preventDefault();
    console.log( task );
    console.log( inMemoryToken );

    fetch( "http://localhost:3000/tasks/", {
        method: 'get',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ${inMemoryToken}'
        },
        body: JSON.stringify( {

            "Task": task

        } )
    } ).then( res => res.json() )
        .then( res => console.log( res ) );
} );

---

我三天来一直在尝试解决这个问题，但无法使其正常工作，非常感谢您的帮助。

要在客户端存储JWT，您有两种选择：

Cookies

或

LocalStorage

策略。我想你已经知道什么是饼干了。LocalStorage与cookie非常相似，但增强了，并且没有在头中发送信息（请参阅），这就是为什么LocalStorage通常作为持久对象应用的原因

服务器端保持原有状态。不需要改变

在客户端上，在登录响应的处理程序中，您将在本地存储中存储来自后端的响应，如下所示：

signinfo.addEventListener（“提交”，（e）=>{
. . .
取回（“http://localhost:3000/users/login", {
. . .
}）。然后（res=>res.json（）
。然后（res=>{
控制台日志（res）；
让inMemoryToken=res.token；
setItem（'user'，JSON.stringify（res））；
//“user”是本地存储中sotre的通用密钥。您可以使用任何名称
//存储完整的对象，以便以后可以访问“用户”和“令牌”

在任务函数中，您应该读取对象的本地存储

const TaskForm=document.querySelector（“添加任务”）；
TaskForm.addEventListener（“提交”，（e）=>{
const task=document.querySelector（“#task”）.value；
e、 预防默认值（）；
console.log（任务）；
//----这是你必须补充的--------
const localstorage_user=JSON.parse（localstorage.getItem（'user'））
const inMemoryToken=localstorage\u user.token
// -------------------------------------------
控制台日志（inMemoryToken）；

非常感谢您，我真的很难弄明白这一点。非常感谢。另外，您能告诉我为什么我的授权传递在此代码中不起作用：如果您觉得它有用，请接受答案：-）您还有什么问题？您的评论中没有提供代码？您指的是您问题的代码吗？对不起，您的链接没有显示。我会看一看。对不起，我现在已经在JSFIDLE上添加了代码，请您看一看。嗯。我想是

”

字符。请尝试：

承载者${inMemoryToken}