如何通过反应进行 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')}, }); .