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

作者: hedeqiang

发布时间: 2020-04-26 16:07:29

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 后端之间发生的情况。

原文地址:https://dev.to/dog_smile_factory/authenticating-a-react-app-with-laravel-sanctum-part-2-90i

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

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 Laravel 7 + React.js 如何使用 Sanctum 做认证,第二部分