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

<分区>

我已经为客户端 开发了一个REST API 和应用程序逻辑。现在，应用程序逻辑和 REST API 都是分离的，没有紧密耦合。

我想实现一个身份验证系统，这样在从client-side 登录后，您将在client-side 和 上自动进行身份验证>REST API 端。

示例:登录客户端后，用户可以访问photo/add和api/photo/add 自动。

我想使用 cookies 但我不知道它是否可行，我想尝试 JWT 但到目前为止我读到的只是解决 client-side 或 front-end 其中应用程序逻辑和对数据库的调用紧密耦合 或 REST API单独使用，但不能同时使用。

简而言之:我是说我当时如何对页面和REST API等 View 进行身份验证？

最佳答案

要在您的客户端和 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 或 session 存储来保持连接

主要区别是 cookie 是作为每个请求的 HTTP header 发送的，而 localstorage 只能通过您的客户端 js 访问

cookie可以在 js 中使用 document.cookie 访问，它给出一个看起来像 name=oeschger 的字符串；最喜欢的食物=牛肚； test1=你好； test2=世界

localStorage可以通过 window.localStorage 访问，这是一个 Storage提供 5 个方法的对象: