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

Laravel

本系列文章讨论了如何使用 Laravel Sanctum 为 React 前端应用程序提供身份验证。 在 第一部分 中,我概述了构建和配置 Laravel 后端所需的步骤。 在本文中,我们将注意力转移到 React 前端。 我将专注于 React 应用和服务器上的 Laravel 之间的通信。 我假设您已经具备构建React应用程序所需的基本技能。

作为参考,有 已完成的版本 以及 React 客户端应用程序 Laravel 服务端应用程序 的完整代码。

创建 React 项目

首先,请使用 create-react-app 创建一个名为 react-auth 的新项目.

npx create-react-app react-auth

然后添加 axios 用于从浏览器向 Laravel API 发起 XMLHttpRequests 请求。

cd c:/react-auth
npm install axios

使用 TailwindCSS 样式

我非常喜欢 TailwindCSS , 他有多种方式对 React 组件设置样式,可以像这样安装:

npm install tailwindcss

接下来,使用以下命令创建一个名为 tailwind.config.js 的配置文件。

npx tailwind init

在应用程序的根目录中,手动创建一个名为 style.css 的文件。 该文件与 tailwind.config.js 一起可用于 自定义Tailwind。 最初,文件应如下所示。

@tailwind base;

@tailwind components;

@tailwind utilities;

如果愿意,可以对 tailwind.config.js 和 style.css 进行任何更改。 无论是否进行任何自定义,都必须运行一个构建步骤,该步骤将创建应用程序实际使用的css文件。

npx tailwind build style.css -o src/css/tailwind.css

最后,通过将 tailwind.css 导入 App.js ,使样式可用于我们的组件。

import "./css/tailwind.css"

图标

我的应用程序中的表单使用了许多不同的图标。 使用 React Icons 可以很容易地将它们包括在内。

npm install react-icons --save

至此,所有依赖项都已安装。

应用概述

让我们看一下该应用程序如何运行。 首先显示以下初始屏幕。

Laravel

右侧有一个菜单可以选择

  • 注册 - 允许新用户注册

  • 登录 - 允许已注册的用户登录

注册时,用户需要输入用户名、邮箱和密码。

Laravel

已注册的用户可以使用邮箱和密码登录。

Laravel

然后,已登录的用户可以注销。

Laravel

用户注销后,该应用将再次显示打开的初始屏幕。 这里没有什么特别的地方,这是每个人都熟悉的标准身份验证流程。

状态管理

让我们看一下实现此过程所需的状态。 此应用程序将使用 React Context 来管理状态。 Context 是在 contexts/AppContext.js 文件中定义的。

该状态的主要组成部分是:

authStatus - 用于控制在某个特定时间显示哪个组件。 当用户进行身份验证的每个步骤时,此值将更改,以便显示下一个组件。

User information (userId and userName). userId 是 Laravel 后端可以用来从数据库检索用户信息的密钥。 在这个简单的身份验证应用程序中,它实际上没有任何用处,但是 userId 几乎是所有要与后端 API 交互的项目中的重要信息。

Form information (userNameInput, userEmail, and userPassword) 这些是将从表单中获取并传递给 Laravel 来执行身份验证功能的数据。

组织代码

App.js 文件:

import React from "react"
import "./css/tailwind.css"
import { AppProvider } from "./contexts/AppContext"
import AuthContainer from "./components/AuthContainer"

function App() {
  return (
    <div className="flex w-full justify-center bg-blue-200 pt-16 pb-32">
      <div className="lg:flex w-11/12 lg:w-3/4 xl:w-3/5">
        <AppProvider>
          <AuthContainer />
        </AppProvider>
      </div>
    </div>
  )
}

export default App

App.js 基本上只是包裹在 AppProvider 组件中的 AuthContainer 组件。 AuthContainer 用于保存所有表单组件(启动页,注册,登录,注销)以及在适当的时间显示正确组件所需的逻辑。 需要AppProvider,以便其余组件可以通过上下文访问状态。

下面是 components/AuthContainer.js 文件。

import React, { useContext } from "react"
import {
  NOT_LOGGED_IN,
  LOG_IN_FORM,
  SIGN_UP_FORM,
  LOGGED_IN,
} from "../constants/AuthStatus"
import AuthNotLoggedIn from "./AuthNotLoggedIn"
import AuthSignup from "./AuthSignup"
import AuthLogin from "./AuthLogin"
import AuthLogout from "./AuthLogout"
import { AppContext } from "../contexts/AppContext"

const AuthContainer = () => {
  const appContext = useContext(AppContext)
  const { authStatus } = appContext
  const showNotLoggedIn = authStatus === NOT_LOGGED_IN ? "" : "hidden"
  const showLoginForm = authStatus === LOG_IN_FORM ? "" : "hidden"
  const showSignupForm = authStatus === SIGN_UP_FORM ? "" : "hidden"
  const showLoggedIn = authStatus === LOGGED_IN ? "" : "hidden"

  return (
    <div className="w-full">
      <div className={showNotLoggedIn + " justify-end py-4"}>
        <AuthNotLoggedIn />
      </div>
      <div className={showLoginForm + " justify-end py-4"}>
        <AuthLogin option="login" />
      </div>
      <div className={showSignupForm + " justify-end py-4"}>
        <AuthSignup option="signup" />
      </div>
      <div className={showLoggedIn + " justify-end py-4"}>
        <AuthLogout />
      </div>
    </div>
  )
}

export default AuthContainer

以下代码使组件可以访问上下文中的状态。

import React, { useContext } from "react";
import { AppContext } from "../contexts/AppContext";

const AuthContainer = () => {
  const appContext = useContext(AppContext);
  const { authStatus } = appContext;

AuthContainer 仅有一项工作:从状态 authStatus 变量读取当前状态,然后基于该值向用户显示适当的组件。 所有组件都在 src/components 文件夹中。

启动页

应用启动时,authStatus 初始化为 NOT_LOGGED_IN ,使得来自 AuthNotLoggedIn 组件的启动页可见。 AuthNotLoggedIn 包含两个组件。 第一个是由 Katerina Limpitsouni 创建的插图,可在其网站unDraw 上免费获得。 第二个是 AuthMenu 组件,它也用于注册和登录显示中。 AuthMenu 有两个按钮。

单击 Signup 按钮后,将运行 AppContext.js 中的 changeAuthStatusSignup() 函数,并将authStatus 的值更改为 SIGN_UP_FORM。 这将导致当前显示的组件被隐藏,并使 AuthSignup 组件可见。

单击登录按钮后,将运行 AppContext.js 中的 changeAuthStatusLogin() 函数,并将 authStatus 的值更改为 LOG_IN_FORM。 这将导致当前显示的组件被隐藏,并使 AuthLogin 组件可见。

第三部分

本文概述了我们 React 应用程序的用户界面部分的工作方式。 在 第3部分,我们将研究用户填写登录表单并按下“提交”按钮以启动通信时,在 React 前端和 Laravel 后端之间发生的情况。

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

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

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

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 1

越来越多的人开始用React了,放弃VUE了!加油吧!React

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!