2

我正在尝试使用中间件 Sanctum 让 React 和 Laravel 一起工作。

我可以阅读许多尝试使用基于 cookie 的设置来执行此操作的示例，但我正在尝试将令牌设置用于纯 API 方法。我这样做是因为我想准备后端以在没有 cookie 的移动应用程序中使用。

这是我设置的一部分：

/后端/路由/api.php：

Route::post('/login', [ UserController::class, 'getAccessToken'] );

/frontend/store/api.js

static login( user ) {

    var formData = new FormData();
    formData.append('username', user.username);
    formData.append('password', user.password )
    formData.append('deviceName', 'browser');

    return fetch( 
        'http://localhost:5001/api/login, {
            method : 'post',
            body : formData
        }
    );
}

我的问题是，当访问登录路由时，它会强制进行 CSRF 令牌检查。即使登录路径不应该由 Sanctum 保护。当我登录并且还没有要附加到请求的令牌时，这当然会失败。据我了解，仅在登录后访问受保护的路由时才需要令牌。我已经通过将其重命名为假的东西并收到错误来仔细检查它是否正在访问正确的路线。

我在使用 Sanctum 时做错了什么，还是 Sanctum 不是 api 令牌的首选用途？我应该改用 JWT 吗？

预先感谢您的帮助。<3

4

3 回答 3

1

请检查此网址，感谢本教程，我能够使其工作。

https://laravel-news.com/using-sanctum-to-authenticate-a-react-spa

这是我的LoginForm.jsx

import React from "react";
import apiClient from "./services/apiClient";

const LoginForm = (props) => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    apiClient.get("/sanctum/csrf-cookie").then((response) => {
      apiClient
        .post("/api/sanctum-token", {
          email: email,
          password: password,
          device_name: "React v0.1",
        })
        .then((response) => {
          console.log(response);
        });
    });
  };
  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginForm;

apiClient.js

import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://localhost",
  withCredentials: true,
});

export default apiClient;

于 2020-10-24T21:17:23.077 回答
0

我使用本教程https://medium.com/@suton.tamimy/basic-token-authentication-with-fresh-laravel-8-sanctum-and-reactjs-ef14eba7ce0f

默认设置 laravel （无设置修改等），带有 API 登录输出 TOKEN 和 BEARER 令牌类型。然后在 ReactJs 中，只需使用这个 axios 设置来生成令牌（不需要 sanctum/csrf-cookie）。

axios.defaults.baseURL = '_MY_API_';
    axios.post('/login', {
      email: '_EMAIL_INPUT_FORM _',
      password: '_PASSWORD_INPUT_FORM_'
    })
    .then(({ data }) => {
      if(data.status==="success"){
        console.log(data)
      } else {
        console.log("error")
      }
    });
  });
于 2021-09-29T04:33:14.177 回答
0

在：

/backend/app/Http/Kernel.php

我补充说：

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

当我删除那条线时它起作用了。我无法理解 SPA 等于使用 cookie，因为我会说我也在研究仅使用 API 令牌的 SPA。

下一个问题是我使用 Doctrine 而不是 Eloquent，我现在可以看到它在发行令牌时与 Sanctum 相去甚远。但这将是另一个问题的主题。

于 2020-10-22T16:44:21.430 回答