Question

我正在尝试仅使用JQuery进行简单的JWT身份验证。我已经用邮递员测试了后端，一切似乎都在那里工作。

以下是我的前端代码的样子

$("#send").click(function(){
    var name = $('#name').val();
    var password = $('#password').val();
    var token = ''
    $.ajax({
      type: 'POST',
      url: '/authenticate',
      data: { name: name , password: password },
      success: function(resultData){
        var token = resultData.token;
        // console.log(token);
        $.ajax({
          type: 'GET',
          url: '/memberinfo',
          headers: {"Authorization": token},
          success: function(data){
             $(location).attr('href', '/memberinfo')
          }
        });
      }
    });
});

所以当我被重定向到memberinfo页面时，它告诉我我是未经授权的。我不确定我是否正确地进行了Ajax调用。如果有人能以正确的方式指导我，那将会非常有帮助。感谢

Answer 1

对于简单用例，只需在登录请求响应中检索一个令牌，并将其保存到localStorage或sessionStorage。然后在每个请求标头内使用localStorage中的标记。请在这里查看示例代码。

https://github.com/chaofz/jquery-jwt-auth

另一方面，在这些存储中存储令牌是不安全的，因为它没有受到XSS攻击的保护。

您最好将令牌存储在Cookie中并检查Cookie策略以防止CSRF攻击。

请阅读更多here

Answer 2

我可能错了，但您可以快速查看代码，因为您为GET request设置了api调用，而您的客户端页面设置了相同的网址/memberinfo。使用Postman的测试结果正常运行，并且在成功验证后您已正确地重定向到/memberinfo，因为您被重定向到相同的/memberinfo网址并且您的浏览器未发送headers: {"Authorization": token}您收到了unauthorised个结果。尝试使api调用url与客户端成员页面不同。

Answer 3

您需要添加单词“ Bearer”：

headers: {"Authorization": "Bearer " + token}, // note the space after Bearer

使用Jquery进行简单的JWT Auth

3 个答案: