Блог

Я пытаюсь заставить React и Laravel работать вместе, используя святилище промежуточного программного обеспечения.

Я могу прочитать много примеров людей, пытающихся сделать это с помощью настройки на основе cookie, но я пытаюсь использовать настройку токена для чистого подхода API. Я делаю это, потому что хочу подготовить серверную часть для использования в мобильном приложении, где файлы cookie недоступны.

Это часть моей настройки:

/backend/routes/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

Пожалуйста, проверьте этот URL, я смог заставить его работать благодаря этому руководству.

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;  

В:

 /backend/app/Http/Kernel.php
  

Я добавил:

 LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
  

Это сработало, когда я удалил эту строку. Я не смог понять, что SPA приравнивается к использованию файлов cookie, потому что я бы сказал, что я также работаю над SPA, который вместо этого просто использует токены API.

Следующая проблема заключается в том, что я использую Doctrine вместо Eloquent, и теперь я вижу, что он далек от совместимости с Sanctum, когда дело доходит до выдачи токена. Но это будет тема для другого вопроса.

Я использую этот учебник https://medium.com/@suton.tamimy/basic-token-authentication-with-fresh-laravel-8-sanctum-and-reactjs-ef14eba7ce0f

настройка laravel по умолчанию (без изменений настроек и т. Д.) С выходным ТОКЕНОМ входа в API и типом токена НА ПРЕДЪЯВИТЕЛЯ. Затем в 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")
      }
    });
  });