在本项目教程中，我们将使用JWT或者JSON Web令牌从服务器获取数据。

在上一教程中，我们学习了如何生成和验证JWT。

登录

打开我们在简介教程中创建的script.js文件。

我们将调用用户验证API。

API: http://localhost/jwt-php-project/api/user
METHOD: POST
DATA: {
  "email": {email},
  "password": {password}
}

成功后，我们将从服务器获得以下响应。

{
  "code": 200,
  "status": "success",
  "message": "Valid login credentials.",
  "userid": "u1",
  "jwt": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyaWQiOiJ1MSIsImlhdCI6MTUyMzgwMTA3OSwiZXhwIjoxNTIzODAxMTM5fQ.ProXLhQbSEqfwj3DAqdJQSJmT8q2JgAw_uJP3BgiSmg"
}

为了验证用户登录凭据，我们将编写以下简单的jQuery代码。

$('#login').on('submit', function (e) {

  //login
  $.ajax({
    url: './api/user',
    type: 'POST',
    data: JSON.stringify({
      email: $('#login-email').val(),
      password: $('#login-password').val()
    }),
    success: function (data) {
      var html = "<pre>" + JSON.stringify(data, null, 2) + "</pre>" +
        "<hr>" +
        "<button class='btn btn-primary' id='getuser' data-jwt='" + data.jwt + "'>Get User Detail</button>" +
        "<hr>" +
        "<div id='detail-container'></div>";
      $('#result-container').html(html);
      $('#login')[0].reset();
    },
    error: function () {
    }
  });

  return false;
});

在上面的代码中，我们正在监听登录表单Submit事件。

在提交表单时，我们将使用用户提供的电子邮件地址和密码，然后调用API进行验证。

如果输入的详细信息正确，我们将获得成功答复。

上面的成功响应包含为提供的用户登录凭据生成的" jwt"。

我们将使用此JWT值来获取用户详细信息。

注意！我们还具有"获取用户详细信息"按钮，单击该按钮将通过使用生成的JWT调用API来使用用户详细信息。

获取用户详细信息

为此，我们将调用获取用户详细信息API。

API: http://localhost/jwt-php-project/api/user
METHOD: GET
PARAMETER: jwt={jwt}

如果传递给服务器的jwt值有效，那么我们将返回以下响应。

{
  "code": 200,
  "status": "success",
  "data": {
    "userid": "u1",
    "email": "@example.com",
    "firstname": "",
    "lastname": ""
  },
  "jwt_payload": {
    "userid": "u1",
    "iat": 1523801079,
    "exp": 1523801139
  }
}

因此，为了获得用户详细信息，我们将编写以下代码，这些代码将在单击按钮时触发。

$('body').on('click', '#getuser', function (e) {
  var jwt = $(this).attr('data-jwt');

  //get user detail
  $.ajax({
    url: './api/user',
    type: 'GET',
    data: {
      jwt: jwt
    },
    success: function (data) {

      if (data.status === 'success') {

        var lifespan = Number(data.jwt_payload.exp - data.jwt_payload.iat);  //in ms

        var html = "<p>For this demo JWT will expire after " + lifespan + " seconds.</p>" +
          "<pre>" + JSON.stringify(data, null, 2) + "</pre>";
        $('#detail-container').html(html);

        setTimeout(function () {
          $('#detail-container').html('<p>JWT expired!</p>');
        }, lifespan * 1000);

      } else {
        var html = "<pre>" + JSON.stringify(data, null, 2) + "</pre>";
        $('#detail-container').html(html);
      }

    },
    error: function () {
    }
  });

});

成功后，我们将从服务器获取以下响应。

注意！对于此演示项目，JWT设置为在60秒后过期。

因此，到期后，我们将看到以下消息。

到期后，如果我们尝试单击"获取用户详细信息"按钮以获取用户详细信息，我们将收到无效的JWT消息。