Question

我已经为REST API开发了client-side和应用程序逻辑。现在，应用程序逻辑和REST API已分离并且没有紧密耦合。

我想实现一个身份验证系统，以便从client-side登录后，您将同时在client-side和REST API端都进行身份验证。

示例：在登录client-side的用户之后，用户可以自动访问photo/add和api/photo/add。

我想使用cookies，但我不知道它是否可行，我想尝试JWT，但到目前为止，我只读了client-side或{ {1}}，其中应用程序逻辑和对数据库的调用是front-end或tightly coupled本身，但不能同时使用。

简而言之：我是说如何同时验证页面和REST API之类的视图？

Answer 1

我想实现一个身份验证系统，以便从客户端登录后，您将同时在客户端和REST API端自动进行身份验证。

您可以使用行业标准RFC 7519方法JWT

实现此目的

只需将passport和passport-jwt添加到您的软件包中，编写中间件来检查请求是否在标头或查询参数中包含令牌。如果有，请检查令牌的可用性（过期，角色等），然后，您的中间件将自动为请求的页面提供服务。

Answer 2

要在客户端和API之间进行通信，可以使用AJAX，为此，您可以使用其中任何一个

the fetch API

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {  
    if (!response.ok) {
      // error handling
      throw new Error('HTTP error, status = ' + response.status);
    }
    return response.json();
  })
  .then(json => console.log(json))

或HMLHttpRequest

let xhttp = new XMLHttpRequest()
xhttp.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', false); 
xhttp.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
            // worked
            console.log(this.responseText);
        } else {
            // error
            console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
        }
    }
};
xhttp.send(null);

可以使用cookie或会话存储来保持连接

主要区别在于，对于每个请求，cookie均作为HTTP标头发送，而本地存储只能通过客户端js访问

cookie可以使用document.cookie在js中访问，它给出的字符串类似于name=oeschger; favorite_food=tripe; test1=Hello; test2=World

localStorage可以通过window.localStorage访问，Storage.key()是一个Storage对象，提供5种方法：

Storage.getItem() 传递数字n时，此方法将返回存储中第n个键的名称。
Storage.setItem() 传递键名后，将返回该键的值。
Storage.removeItem() 传递键名和值后，会将其添加到存储中，或者如果该键已经存在，则更新该键的值。
Storage.clear() 传递密钥名称后，将从存储中删除该密钥。
<span> 调用时，会将所有键清空存储空间。

保持某人登录的方式

使用它们进行自动登录的方式是：

您查看是否存储有身份验证令牌（随机唯一字符串）
如果是，请尝试使用令牌登录
- 如果服务器接受一切正常
- 如果服务器拒绝您，请转到其他
其他
- 用户通常使用其帐户登录
- 服务器使用身份验证令牌回答
- 您以自己想要的方式存储它

auth令牌的寿命必须有限（在欧洲，cookie的生存期超过一年是非法的）

每个帐户最多只能有一个令牌，新令牌会使先前的令牌无效

有关https://security.stackexchange.com/上的流程的更多信息

验证前端应用程序和后端REST API

2 个答案:

保持某人登录的方式