0

我有一个正在运行的单页create-react-applocalhost:3000，我想登录到在（vhost）上运行的laravel 7.x实例。myapp.loc

最终我想要一个运行app.mysite.comlaravel的单页api.mysite.com。

我可以直接从myapp.loc. 我已经安装了Laravel 护照和脚手架等，并且可以创建客户端 ID 和秘密，但我不确定是否需要它们，如果需要，如何使用它们。

我不确定并且找不到任何文档的是如何从我的 SPA 登录到 laraval（在 上运行localhost:3000）。我已经设置了我的 CORS 标头，并且可以连接不需要身份验证的请求，但我不知道如何登录或在登录后构造身份验证请求。

我找不到关于 axios.post / get 请求的任何文档，重点是从另一个域登录并维护基于用户的访问。

由于我的知识不足以提出一个简洁的问题，因此我觉得我应该从三个层面寻找答案。

  1. laravel 是否可以充当我来自另一个域的单页应用程序的后端？
  2. 如果是这样，是否有记录在案的最佳实践/陈旧的路径来实现这一目标？
  3. 如果是这样，示例 axios 登录和后续会话调用会是什么样子？（例如有效载荷和报头形状）
4

2 回答 2

3

  1. 是的，你可以，我建议使用https://laravel.com/docs/7.x/sanctum而不是护照，因为它更容易设置，而且它是专门为这种情况而创建的。

  2. 您需要使用官方 Laravel 包https://github.com/fruitcake/laravel-cors配置 CORS，这样您将打开 Laravel 的 CORS，以便能够从任何 localhost 或您可以设置的任何域访问它allowed_origins。根据包的文档在 cors.php 配置文件中。

  3. 在配置 Sanctum/Passport 并确保您使用 Sanctum 或 Passport 文档中描述的方法为您的 SPA 生成所需的令牌createToken后，您必须保存令牌以连接到受保护的端点，但是他们建议使用基于 cookie SPA 的身份验证，但这不是绝对必要。

创建 API 服务

在本例中，我将创建一个 API 服务来封装 API 调用

import axios from 'axios';

const URI = 'https://yourlaravel.api/api/';

axios.defaults.headers.common = { Accept: 'application/json', 'Content-Type': 'application/json' };

const ApiInstance = axios.create();

const API = {
  login: (user) => {
    return ApiInstance.post(`${URI}login`, user);
  },
  getUser: () => {
    return ApiInstance.get(`${URI}user`);
  },
  setUser: (user) => {
    return ApiInstance.post(`${URI}user`, user);
  },
};

向您的登录端点发送登录请求并保存令牌

import API;


API.login({email:'mail@domain.com',password:'32323'})
    .then(response=>{
      //save the token
      //response.data.accessToken  
})

使用令牌从受保护的端点获取数据

//Set the default authorization header when you have an access token
axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}


//Get your data

API.getUser().then(response=>{
      //response.data
})

//Post something

API.setUser({user:'Os'}).then(response=>{
      //response.data
})
于 2020-06-18T23:09:54.207 回答
0

所有这些都是可能的，你只需要设置 cors 就可以了。对于身份验证，您可以使用护照或您自己的自定义应用程序密钥设置，这完全取决于您要实现的目标。我建议阅读有关 RESTfull api 的内容，这将是一个好的开始。

为了在 FE 上执行 FE 和 BE 之间的握手，您将有一个登录表单提交，它将向 BE（后端 api）发送 e 请求，如果登录成功，您将返回一个密钥，然后 FE 应该存储该密钥。来自 FE 的任何未来请求都应在标头中附加该密钥以访问授权区域。

google 上应该有很多关于这个主题的信息（RESTfull Api & Token authentication）。

于 2020-06-18T23:08:56.583 回答