如何通過反應進行 JWT 身份驗證？

Question

我不確定如何在前端正確進行 JWT 身份驗證，但我在后端幾乎沒有任何問題。

使用 Javascript 我並沒有超出這個片段太遠，因為我不得不重做很多次，但無論如何它都不起作用

const submit = async (e) => {
    e.preventDefault();
    await axios('http://localhost:8080/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        credentials: 'include',
        data:new URLSearchParams(`username=${username}&password=${password}`)
    });
}

它基本上只是在頁面的網絡信息中顯示訪問和刷新令牌。

我如何從那里實際識別網站上的用戶並實際能夠使用用戶自己的數據，例如文件？

我只需要能夠識別用戶，他們的所有數據，例如個人資料信息，照片等......並且用戶只能訪問自己的數據

Answer 1

JWT 用於編碼允許用戶采取哪些操作以及查看哪些頁面。 例如，您可以在令牌中對他們的角色進行編碼，以指示他們被允許訪問的內容。 為了檢索他們的數據，例如個人資料信息、照片等，您必須發送其他信息，可能是用戶 ID，或者您必須在默認情況下不存在的令牌內對 id 字段進行編碼。

Answer 2

你已經擁有了你需要的東西。 access&refresh 令牌是需要授權的路由所需的令牌。 令牌具有用戶詳細信息，可向發出請求的后端標識他們。 登錄后，您將令牌保存在瀏覽器上，只要令牌有效，用戶就已登錄。令牌與需要授權才能訪問的請求一起發送為 header 就像這樣讓我們說要獲取用戶完整配置文件已登錄 ->

axios(' api/user/profile ', { method: 'POST', headers: {'Content-Type': 'application/json,'Authorization':'Bearer' + localStorage.getItem('user-token')}, }); .