javascript - 使用纯 Javascript/AJAX 实现客户端基于 token 的身份验证

Question

谁能给我指点一篇解释使用 Javascript 进行客户端 token 身份验证实现的文章吗？

我发现了很多关于 Angular 的文章，但这不是我要找的。这让我想到了是否可以用 Javascript 来完成的问题。

另外，当身份验证服务器抛出 401 时如何处理场景。是否有内置异常来检测该响应？或者是否需要实现自定义异常？

Answer 1

我个人在我的一个项目中使用过 JSON Web token 。<强> http://blog.slatepeak.com/creating-a-simple-node-express-api-authentication-system-with-passport-and-jwt 是有关如何在服务器端设置 JSON Web token 的教程。

获得 token 作为对客户端的响应后，您可以将 token 存储在 window.localStorage 上。

var credentials = {
    username : document.getElementById("username").value,
    password : document.getElementById("password").value
};
var url = window.localStorage.getItem('appUrl');
$.ajax({
  url: url + '/register',
  type: 'POST', 
  data: { username: credentials.username, password: credentials.password },
  success: function(Data) {
           window.localStorage.setItem('token', Data.token);
          },
  beforeSend: function(xhr){xhr.setRequestHeader('Authorization', window.localStorage.getItem('token'));},
  error: function() {
          alert('Error occured');
          }
});

});

然后，您可以在导航到其他页面时将其作为 header 附加到 AJAX 调用中。

$.ajax
 ({
  type: "GET",
  url: "index1.php",
  data: '{}',
  beforeSend: function (xhr){ 
     xhr.setRequestHeader('Authorization',window.localStorage.getItem('token')); 
  },
 success: function (){
  alert('Thanks for your comment!'); 
 }
});