Laravel 7 + React.js 如何使用 Sanctum 做认证，第三部分

本系列文章讨论了如何使用 Laravel Sanctum 为前端 React 应用程序提供身份验证。 在第一部分中，我概述了构建和配置 Laravel 后端所需的步骤。 第二部分讨论了React 应用程序的前端UI界面，包括应用程序状态和 React 上下文的使用。 在本文中，我们将逐步介绍用户尝试登录或注册应用程序时需要进行的各种操作。

作为其他参考，有 已完成版本 以及 React客户端 和 Laravel服务端 的完整代码。

登录流程概述

让我们首先概述用户登录应用程序时需要执行的每个步骤。

• User - 用户填写登录表单。

• User - 用户单击登录按钮。

• React - React 将消息发送到 API sanctum/csrf-cookie 端点。

• Laravel - Laravel 响应 CSRF令牌。

• React - React 将 POST 消息以及用户提供的邮箱和密码信息发送到 api/login API 。

• Laravel - Laravel 将端点与我们在 routes/api.php 文件中创建的路由进行匹配，并在UserController 中调用 login 函数。

• Laravel - UserController 中的登录函数调用 Auth 类中的函数，以使用用户提供的凭据对身份进行验证。

• Laravel - 如果验证成功，Laravel 会向浏览器返回200消息，否则会返回401消息。

• React - 如果身份验证成功，React 将 GET 消息发送到 ** api/user** API。

• Laravel - Laravel 将端点与 route/api.php 文件中的路由匹配，并返回当前登录的用户。

• React - React 接收用户信息并更新状态下的 userId 和 userName。

• React - authStatus 设置为 LOGGED_IN，并且向用户显示注销组件。

登录代码

现在，我们来看一下完成每个步骤的代码。

当用户单击登录按钮时，将运行 AppContext 中的登录功能。 首先要做的是将 axios 的 withCredentials 属性设置为 true。 这是不可跳过的重要步骤。

// REACT APP src/contexts/AppContext.js - login()
const login = () => {
    axios.defaults.withCredentials = true;

然后使用 axios 将 GET 消息发送到 sanctum/csrf-cookie 端点。 Laravel 使用 CSRF 令牌进行响应，该令牌随后将附加到对该 API 的所有后续调用中。 Laravel 使用令牌来验证经过身份验证的用户是否是实际向应用程序发出请求的用户。 这样可以保护应用程序免受 跨站点伪造请求的攻击。

// REACT APP src/contexts/AppContext.js - login()
// CSRF COOKIE
    axios.get(hostName + "sanctum/csrf-cookie").then(

接下来，axios 将 POST 请求以及用户在登录表单中输入的邮箱和密码发送到 api/login 端点。

// REACT APP src/contexts/AppContext.js - login()
// LOGIN
axios.post(hostName + "api/login", {
  email: userEmail,
  password: userPassword,
})

Laravel 将端点与我们在 routes/api.php 文件中创建的路由进行匹配，并在 UserController 中调用 login 方法。

// LARAVEL APP routes/api.php
Route::post('/login', 'UserController@login');

UserController 中的登录方法调用 Auth 类中的函数，使用用户提供的凭据对身份进行验证。 如果身份验证成功，Laravel 将以 200 消息响应，否则将显示 401 消息。

// LARAVEL APP app/Http/Controllers/UserController.php
    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // Authentication passed...
            $authuser = auth()->user();
            return response()->json(['message' => 'Login successful'], 200);
        } else {
            return response()->json(['message' => 'Invalid email or password'], 401);
        }
    }

如果身份验证成功，React 将 GET 消息发送到API api/user 端点。

// REACT APP src/contexts/AppContext.js - login()
// GET USER
axios.get(hostName + "api/user").then(

Laravel 将端点与 route/api.php 文件中的路由匹配，并返回当前登录的用户。

// LARAVEL APP routes/api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

React 接收用户信息并更新状态下的 userId 和 userName。 authStatus 设置为 LOGGED_IN，这将导致注销组件显示给用户。

// REACT APP src/contexts/AppContext.js - login()
    (response) => {
        setUserId(response.data.id);
        setUserName(response.data.name);
        setErrorMessage("");
        setAuthStatus(LOGGED_IN);
},

整个登录功能如下所示。 如果对 API 的任何调用导致返回错误响应，则会创建错误消息，并通过errorMessage 状态属性将其显示给用户。

// REACT APP src/contexts/AppContext.js - login()
const login = () => {
  axios.defaults.withCredentials = true
  // CSRF COOKIE
  axios.get(hostName + "sanctum/csrf-cookie").then(
    (response) => {
      //console.log(response);
      // LOGIN
      axios
        .post(hostName + "api/login", {
          email: userEmail,
          password: userPassword,
        })
        .then(
          (response) => {
            //console.log(response);
            // GET USER
            axios.get(hostName + "api/user").then(
              (response) => {
                //console.log(response);
                setUserId(response.data.id)
                setUserName(response.data.name)
                setErrorMessage("")
                setAuthStatus(LOGGED_IN)
              },
              // GET USER ERROR
              (error) => {
                setErrorMessage("Could not complete the login")
              }
            )
          },
          // LOGIN ERROR
          (error) => {
            if (error.response) {
              setErrorMessage(error.response.data.message)
            } else {
              setErrorMessage("Could not complete the login")
            }
          }
        )
    },
    // COOKIE ERROR
    (error) => {
      setErrorMessage("Could not complete the login")
    }
  )
}

第四部分

本文详细介绍了 React 应用程序的登录功能的身份验证部分中如何工作。 第4部分将为注册功能提供类似的细分。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://dev.to/dog_smile_factory/authent...

译文地址：https://learnku.com/laravel/t/43730