亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用fetch在前端存儲和處理JWT令牌,以及如何存儲?

如何使用fetch在前端存儲和處理JWT令牌,以及如何存儲?

陪伴而非守候 2022-12-09 17:16:13
我是開發新手,我有一個任務管理器應用程序,我在其中使用 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,        } );    }} );從 3 天開始,我一直在嘗試解決這個問題,但無法正常工作,我們將不勝感激任何幫助。
查看完整描述

1 回答

?
慕萊塢森

TA貢獻1810條經驗 獲得超4個贊

要在客戶端上存儲 JWT,您有兩種選擇:CookiesLocalStorage策略。我想您已經知道什么是 cookie。LocalStorage 與 cookie 非常相似,但有所增強且不在標頭中發送信息(請參閱Mozilla 開發人員定義),這就是 LocalStorage 通常用作持久對象的原因。

服務器端保持不變。無需更改。

在您的客戶端上,在登錄響應的處理程序中,您將在 LocalStorage 中存儲來自后端的響應,如下所示:

signInForm.addEventListener( "submit", ( e ) => {

  . . .

  fetch( "http://localhost:3000/users/login", {

    . . .

  } ).then( res => res.json() )

       .then( res => {

          console.log( res );

          let inMemoryToken = res.token;


          localStorage.setItem('user', JSON.stringify(res));

          // 'user' is the generic key to sotre in LocalStorage. You could use any name you want

          // Store complete object, so you will be able to access 'user' and 'token' later

在你的任務功能上,你應該為你的對象閱讀 LocalStorage


const TaskForm = document.querySelector( "#add-tasks" );

TaskForm.addEventListener( "submit", ( e ) => {

    const task = document.querySelector( '#task' ).value;

    e.preventDefault();

    console.log( task );

    

    // ------ This is what you have to add --------

    const localstorage_user = JSON.parse(localStorage.getItem('user'))

    const inMemoryToken = localstorage_user.token

    // -------------------------------------------


    console.log( inMemoryToken );


查看完整回答
反對 回復 2022-12-09
  • 1 回答
  • 0 關注
  • 183 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號