Laravel 7 + React.js 如何使用 Sanctum 做认证,第二部分
本系列文章讨论了如何使用 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
至此,所有依赖项都已安装。
应用概述
让我们看一下该应用程序如何运行。 首先显示以下初始屏幕。
右侧有一个菜单可以选择
注册 - 允许新用户注册
登录 - 允许已注册的用户登录
注册时,用户需要输入用户名、邮箱和密码。
已注册的用户可以使用邮箱和密码登录。
然后,已登录的用户可以注销。
用户注销后,该应用将再次显示打开的初始屏幕。 这里没有什么特别的地方,这是每个人都熟悉的标准身份验证流程。
状态管理
让我们看一下实现此过程所需的状态。 此应用程序将使用 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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
越来越多的人开始用React了,放弃VUE了!加油吧!React