【实战】 JWT、用户认证与异步请求(1) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（四）

news2025/1/12 4:00:08

文章目录

    • 一、项目起航：项目初始化与配置
    • 二、React 与 Hook 应用：实现项目列表
    • 三、TS 应用：JS神助攻 - 强类型
    • 四、JWT、用户认证与异步请求
      • 1.login
      • 2.middleware of json-server
      • 3.jira-dev-tool（imooc-jira-tool）
        • 安装
        • 问题
          • 问题一
          • 问题二
        • 使用
      • 4.JWT原理与auth-provider实现
        • 注册一个新用户
        • auth-provider
      • 5.useContext(user,login,register,logout)

学习内容来源：React + React Hook + TS 最佳实践-慕课网

相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：

项版本
react & react-dom^18.2.0
react-router & react-router-dom^6.11.2
antd^4.24.8
@commitlint/cli & @commitlint/config-conventional^17.4.4
eslint-config-prettier^8.6.0
husky^8.0.3
lint-staged^13.1.2
prettier2.8.4
json-server0.17.2
craco-less^2.0.0
@craco/craco^7.1.0
qs^6.11.0
dayjs^1.11.7
react-helmet^6.1.0
@types/react-helmet^6.1.6
react-query^6.1.0
@welldone-software/why-did-you-render^7.0.1
@emotion/react & @emotion/styled^11.10.6

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

一、项目起航：项目初始化与配置

  • 【实战】 项目起航：项目初始化与配置 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（一）

二、React 与 Hook 应用：实现项目列表

  • 【实战】 React 与 Hook 应用：实现项目列表 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二）

三、TS 应用：JS神助攻 - 强类型

  • 【实战】 TS 应用：JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（三）

四、JWT、用户认证与异步请求

1.login

  • 新建文件：src\screens\login\index.tsx：
import { FormEvent } from "react";

const apiUrl = process.env.REACT_APP_API_URL;

export const Login = () => {
  const login = (param: { username: string; password: string }) => {
    fetch(`${apiUrl}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(param),
    }).then(async (res) => {
      if (res.ok) {
      }
    });
  };

  // HTMLFormElement extends Element (子类型继承性兼容所有父类型)(鸭子类型：duck typing: 面向接口编程 而非 面向对象编程)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const username = (event.currentTarget.elements[0] as HTMLFormElement).value;
    const password = (event.currentTarget.elements[1] as HTMLFormElement).value;
    login({ username, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">用户名</label>
        <input type="text" id="username" />
      </div>
      <div>
        <label htmlFor="password">密码</label>
        <input type="password" id="password" />
      </div>
      <button type="submit">登录</button>
    </form>
  );
};
  • 在 src\App.tsx 中引入:
import "./App.css";
import { Login } from "screens/login";

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

目前页面点击登录 404，下一步配置 json-server 中间件，使其可以模拟 非 restful 接口

2.middleware of json-server

  • 新建文件：__json_server_mock__\middleware.js：
module.exports = (req, res, next) => {
  if (req.method === "POST" && req.path === "/login") {
    if (req.body.username === "user" && req.body.password === "123") {
      return res.status(200).json({
        user: {
          token: "token123",
        },
      });
    } else {
      return res.status(400).json({ message: "用户名或者密码错误" });
    }
  }
  next();
};
  • 配置 package.json 中 json-server 的 script：
"json-server": "json-server __json_server_mock__/db.json -w -p 3001 --middlewares ./__json_server_mock__/middleware.js"
  • 配置完后重新启动 json-server ,输入中间件预置用户名和密码即可正常访问（200），否则（400：bad request）

3.jira-dev-tool（imooc-jira-tool）

jira-dev-tool - npm

安装

  • 首先确认 git 工作区 clean，安装 jira-dev-tool（imooc-jira-tool）
npx imooc-jira-tool
  • 引入到 src\index.tsx
import { loadDevTools } from "jira-dev-tool";

loadDevTools(() => {
  ReactDOM.render(
    <React.StrictMode>
      <AppProviders>
        <App />
      </AppProviders>
    </React.StrictMode>,
    document.getElementById("root")
  );
});

这一步后页面会多出一个“齿轮”，点击即可使用 jira-dev-tool

问题

安装 jira-dev-tool（imooc-jira-tool）后启动项目联调可能会出现的问题

问题一
  • 报错：
request (TypeError: Failed to fetch). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.
  • 解决：
npx msw init ./public/ --save
问题二

由于 jira-dev-tool 已经两年没有更新了，且依赖 react@“^16.0.0”, 若要继续使用，在 npm i 时会有如下报错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: jira@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from jira-dev-tool@1.7.61       
npm ERR! node_modules/jira-dev-tool
npm ERR!   jira-dev-tool@"^1.7.61" from the root project      
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry       
npm ERR! this command with --force or --legacy-peer-deps      
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\...\npm-cache\_logs\2023-03-08T09_11_24_998Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! C:\...\npm-cache\_logs\2023-03-08T09_11_24_998Z-debug-0.log

解决方案一：

  • 删掉文件 yarn.lock，以及package.json 中的 "jira-dev-tool": "^1.7.61", 部分，jira-dev-tool 手动安装

解决方案二（推荐）

  • 使用 yarn 代替 npm i

使用

  • 开发者工具用 MSW 以 Service Worker 为原理实现了"分布式后端"
  • 后端逻辑处理后，以localStorage为数据库进行增删改查操作
  • 浏览器上安装了一个独立的后端服务和数据库，再也不受任何中心化服务的影响 点击’清空数据库’便可以重置后端服务
  • 可以精准地控制 HTTP请求的时间、失败概率、失败规则
  • Service Worker + localStorage虽然本质上与传统后端服务并不同，但丝毫不会影响前端开发

其他具体操作可见文档以及接下来的操作：jira-dev-tool - npm

  • Service Worker API - Web API 接口参考 | MDN

安装好后进入/login,请求login接口，可以看到状态码后带有（from service worker）字样即成功连接：

在这里插入图片描述

开发工具控制台第一个tab页设置请求最短时间、请求失败比例：

在这里插入图片描述

开发工具控制台将/login添加到异步请求失败设置中，状态码 400 变为 500，提示：“请求失败，请检查 jira-dev-tool 的设置”：
在这里插入图片描述

4.JWT原理与auth-provider实现

注册一个新用户

  • 修改：src\screens\login\index.tsx：
    • 调用接口 login 改为 register；
    • 按钮 登录 改为 注册

注册一个新用户 jira（密码：jira），接口返回：

{
  "user": {
    "id": 2087569429,
    "name": "jira",
    "token": "MjA4NzU2OTQyOQ=="
  }
}

token 即是 JWT(JSON Web Tokens) 的产物

  • JSON Web Tokens - jwt.io

auth-provider

修改 src\screens\ProjectList\components\SearchPanel.tsx，为 User 新增 token:

export interface User {
  id: string;
  name: string;
  email: string;
  title: string;
  organization: string;
  token: string;
}
...

新建 src\auth-provider.ts：

模拟第三方服务

// 在真实环境中，如果使用了 firebase 这种第三方 auth 服务的话，本文件不需要开发者开发

import { User } from "screens/ProjectList/components/SearchPanel"

const localStorageKey = '__auth_provider_token__'
const apiUrl = process.env.REACT_APP_API_URL;

export const getToken = () => window.localStorage.getItem(localStorageKey)

export const handleUserResponse = ({user} : { user: User }) => {
  window.localStorage.setItem(localStorageKey, user.token || '')
  return user
}

export const login = (data: { username: string, password: string }) => {
  return fetch(`${apiUrl}/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  }).then(async (res) => {
    if (res.ok) {
      return handleUserResponse(await res.json())
    } else {
      return Promise.reject(data)
    }
  });
}

export const register = (data: { username: string, password: string }) => {
  return fetch(`${apiUrl}/register`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  }).then(async (res) => {
    if (res.ok) {
      return handleUserResponse(await res.json())
    } else {
      return Promise.reject(data)
    }
  });
}

export const logout = async () => window.localStorage.removeItem(localStorageKey)

细节点：

  • 函数定义时，值前添加 async 使其返回一个 Promise 对象
  • 回调函数入参和回调函数内有且只有一个函数调用且它的入参与回调函数入参一致，该回调函数可直接简写为其内部的函数调用且不带参（这是函数式编程-PointFree的一种应用）：
    • const login = (form: AuthForm) => auth.login(form).then(user => setUser(user))
    • const login = (form: AuthForm) => auth.login(form).then(setUser)

【笔记】函数式编程——PointFree

5.useContext(user,login,register,logout)

新建 src\context\auth-context.tsx：

import React, { ReactNode, useState } from "react"
import * as auth from 'auth-provider'
import { User } from "screens/ProjectList/components/SearchPanel"

interface AuthForm {
  username: string,
  password: string
}

const AuthContext = React.createContext<{
  user: User | null,
  login: (form : AuthForm) => Promise<void>,
  register: (form : AuthForm) => Promise<void>,
  logout: () => Promise<void>,
} | undefined>(undefined)

AuthContext.displayName = 'AuthContext'

export const AuthProvider = ({children}:{children: ReactNode}) => {
  // 这里要考虑到初始值的类型与后续值类型，取并组成一个泛型
  const [user, setUser] = useState<User | null>(null)

  const login = (form: AuthForm) => auth.login(form).then(user => setUser(user))
  const register = (form: AuthForm) => auth.register(form).then(user => setUser(user))
  const logout = () => auth.logout().then(() => setUser(null))

  return <AuthContext.Provider children={children} value={{ user, login, register, logout }}/>
}

export const useAuth = () => {
  const context = React.useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth 必须在 AuthProvider 中使用')
  }
  return context
}

新建 src\context\index.tsx：

import { ReactNode } from "react";
import { AuthProvider } from "./auth-context";

export const AppProvider = ({children}:{children: ReactNode}) => {
  return <AuthProvider>
    {children}
  </AuthProvider>
}

在项目中使用 AppProvider，修改 src\index.tsx：

import { AppProvider } from "context";
...
loadDevTools(() => {
  root.render(
    // <React.StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
    // </React.StrictMode>
  );
});
...

修改 src\screens\login\index.tsx，调用 useAuth 中的 login，并使用之前注册的账号 jira(jira) 验证：

import { useAuth } from "context/auth-context";
import { FormEvent } from "react";

export const Login = () => {
  const {login, user} = useAuth()
  // HTMLFormElement extends Element (子类型继承性兼容所有父类型)(鸭子类型：duck typing: 面向接口编程 而非 面向对象编程)
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {...};
  return (
    <form onSubmit={handleSubmit}>
      <div>
        {
          user ? <div>
            登录成功，用户名{user?.name}
          </div> : null
        }
      </div>
      <div>
        <label htmlFor="username">用户名</label>
        <input type="text" id="username" />
      </div>
      <div>
        <label htmlFor="password">密码</label>
        <input type="password" id="password" />
      </div>
      <button type="submit">登录</button>
    </form>
  );
};

部分引用笔记还在草稿阶段，敬请期待。。。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/679865.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《流浪地球 2》的硬核黑科技

《流浪地球 2》的硬核黑科技

电影中&#xff0c;由刘德华饰演的量子计算机工程师图恒宇有一个惊心动魄的情节。为了同步启动全球地球发动机&#xff0c;需要重启互联网&#xff0c;避免地壳破碎和地质灾害。而重启互联网的关键则是要启动“根服务器”。电影中没有具体交代是什么根服务器&#xff0c;但是当…
阅读更多...
Ubuntu18.04屏幕分辨率问题

Ubuntu18.04屏幕分辨率问题

本篇博客最早发布于实验室公共博客&#xff0c;但已无人维护&#xff0c;现迁移至个人博客 起因 本来昨天还好好的&#xff0c;过了一夜&#xff0c;就变了&#xff0c;像极了咳咳(自行脑补) redwallbot-2小车上固定的屏幕&#xff0c;屏幕分辨率本来应该是1920x1080的&#…
阅读更多...
DevOps系列文章之 linux安装ftp

DevOps系列文章之 linux安装ftp

第一步 1、用root 进入系统 2、使用命令 rpm -qa|grep vsftpd 查看系统是否安装了ftp&#xff0c;若安装了vsftp&#xff0c;使用这个命令会在屏幕上显示vsftpd的版本 3、使用命令rpm -e vsftpd 即可卸载ftp 4、再使用rpm -qa|grep vsftpd 查看系统是否已删除ftp&#xff0…
阅读更多...
【小技巧】vscode 在 JS 文件中补全 HTML标签

【小技巧】vscode 在 JS 文件中补全 HTML标签

文章目录 vscode中有很多插件可以支持 HTML 标签自动补全&#xff0c;在.vue和.html文件中都没有问题&#xff0c;但是在使用react时&#xff0c;HTML标签是写在js或者是ts文件中&#xff0c;插件就不起作用了 解决方案&#xff1a; 在设置中插入这段设置代码 "emmet.i…
阅读更多...
uniapp 微信小程序sourcemap映射

uniapp 微信小程序sourcemap映射

uniapp 微信小程序sourcemap映射 错误捕获 由于微信小程序中没有window对象&#xff0c;不能通过window.onerror和window.onunhandledRejection方法进行全局的监听。不过我们也可以使用以下几种方法。 使用try…catch 将可能出现的错误的代码使用try...catch包裹 try{cont…
阅读更多...
【C++】一文读懂C++中的异常处理机制

【C++】一文读懂C++中的异常处理机制

文章目录 C 中的异常处理机制1.1 什么是异常&#xff1f;1.2 调用abort()1.3 返回错误码1.4 异常机制1.5 将对象用作异常类型1.6 异常规范和C111.7 栈解退1.7.1 return和throw的区别1.7.2 什么是栈解退 1.8 其他异常特性1.9 excepyion类1.9.1 stdexcept异常类1.9.2 bad_alloc异…
阅读更多...
329款超有设计感的英文字体合集

329款超有设计感的英文字体合集

一组超有设计感的英文字体合集&#xff0c;总共329个字库包含多种字体风格&#xff1a;手写字体、签名字体、复古字体、笔刷字体、漫画字体等无衬线字体。适用于签名、文具、标志、排版引言、杂志或书籍封面。素材获取&#xff1a;取括号内容&#xff0c;&#xff08;scwan&…
阅读更多...
【 openGauss数据库】--运维指南01

【 openGauss数据库】--运维指南01

【 openGauss数据库】--运维指南01 &#x1f53b; 一、 openGauss数据库运维指南&#x1f530; 1.1 启停openGauss&#x1f530; 1.2 查看openGauss数据库状态 &#x1f53b; 二、 维护检查项&#x1f530; 2.1 检查实例状态&#x1f530; 2.2 检查锁信息&#x1f530; 2.3 统计…
阅读更多...
个人向非企业，基于目前主流图床的选购指南

个人向非企业，基于目前主流图床的选购指南

1. 为什么需要搭建自己的图床 最近研究了一下国内外比较主流的图床与对象存储&#xff0c;因为个人写作更加偏向于使用Markdown&#xff0c;而国内很多平台如掘金&#xff0c;简书&#xff0c;csdn等等网站都做了相关的防盗链&#xff0c;即使是我为作者本人&#xff0c;想取用…
阅读更多...
C语言里面那些你必须知道的常用关键字（详细讲解）

C语言里面那些你必须知道的常用关键字（详细讲解）

前言 哈喽&#xff0c;各位铁汁们好啊&#xff01;✨今天来给大家带来的是C语言中我们常用的关键字静态static的详细讲解和typedef 、#define定义常量和宏。   既然是详解想必大家必定是想学一些平常学不到的东西吧&#xff01;这里博主给大家详细讲解static修饰的变量在内存…
阅读更多...
2023最全的Java架构师面试120题解析(MySQL/Redis/架构/高并发等)

2023最全的Java架构师面试120题解析(MySQL/Redis/架构/高并发等)

最全架构师题目将包含如下技术范围&#xff1a; 1.Java基础和高级: 集合框架: List&#xff1a;ArrayList、LinkedList&#xff1b;Set&#xff1a;HashSet、TreeSet Map:TreeMap/ConcurrentHashMap&#xff1b;Queue:ConcurrentLinkedQueue等 泛型、反射、并发编程、JVM、A…
阅读更多...
基于Smb协议实现网络文件传输(Golang)

基于Smb协议实现网络文件传输(Golang)

在前面章节已经展示了一些关于SMB的基本介绍&#xff0c;以及对应SMB相关操作的Java实现&#xff0c;这一章主要是前一章的补充&#xff0c;使用Golang来对 SMB共享文件夹进行操作。如果没有阅读过上一章节的同学&#xff0c;请跳转到 基于Smb协议实现网络文件传输&#xff0c;…
阅读更多...
Axure教程—折叠面手风琴效果

Axure教程—折叠面手风琴效果

上文中介绍了用Axure制作折叠面板的基础制作&#xff0c;这次介绍折叠面板手机风琴效果 效果 预览地址&#xff1a;https://e18rf6.axshare.com 功能 点击标题展开内容&#xff0c;点击另一标题&#xff0c;其展开的内容折叠 制作 拖入四个动态面板&#xff0c;分别命名为1、…
阅读更多...
PHP流程控制与文件包含：基础与关键要点

PHP流程控制与文件包含：基础与关键要点

目录 PHP流程控制 顺序结构&#xff1a; 分支结构&#xff1a; Switch分支&#xff1a; PHP循环结构 for循环 while循环 do-while循环 while和do-while的区别&#xff1a; 循环控制 流程控制代替语法 PHP文件包含 PHP文件包含的作用 PHP文件包含的四种形式 PHP文…
阅读更多...
【spring cloud学习】3、Eureka Server注册中心

【spring cloud学习】3、Eureka Server注册中心

Eureka本身是Netflix开源的一款注册中心产品&#xff0c;并且Spring Cloud提供了相应的集成封装。选择Eureka作为注册中心实例来讲解是出于以下原因&#xff1a; &#xff08;1&#xff09;Eureka在业界的应用十分广泛&#xff0c;整个框架经受住了Netflix严酷生产环境的考验。…
阅读更多...
Qt中的信号和信号槽（一）

Qt中的信号和信号槽（一）

目录 1. 信号和槽概述 信号和槽的关系 2. 标准信号槽使用 标准信号/槽 示例&#xff1a; 3. 自定义信号槽使用 自定义信号 自定义槽 示例&#xff1a; 1. 信号和槽概述 信号和槽是一种事件驱动的通信机制&#xff0c;广泛应用于Qt框架的事件处理、GUI编程、网络通信等…
阅读更多...
如何在教育与科研领域使用ChatGPT

如何在教育与科研领域使用ChatGPT

ChatGPT提示是您给予ChatGPT的一系列指示&#xff0c;以便它能够按需生成结果。由于ChatGPT是一种会话型人工智能&#xff0c;因此它需要明确的指示才能生成准确的结果。 ChatGPT提示的结构通常是以指令格式呈现的。它看起来像是您在与AI交流&#xff0c;给予它执行特定任务的…
阅读更多...
基于树莓派4B的OpenCV安装与简单应用（真速通版）

基于树莓派4B的OpenCV安装与简单应用（真速通版）

前言&#xff1a;本文为手把手教学树莓派4B的OpenCV安装与简单应用&#xff08;真速通版本&#xff09;&#xff0c;树莓派4B最为目前最新款的树莓派家族一员深受创客和开发者喜爱。树莓派4B作为一款搭载 Cortex-A72 系列芯片的板载电脑&#xff0c;其不仅可以作为简单的 MCU 进…
阅读更多...
第三方库介绍——Protobuf库(更高效的协议)

第三方库介绍——Protobuf库(更高效的协议)

文章目录 protobuf综述传输协议与指令创建协议编译协议介绍addressbook.pb.h文件序列化与反序列化的接口 利用soctet实现客户端与服务端传输协议Linux&#xff08;Ubuntu&#xff09;安装protoc步骤编写案例代码Cartoon.prototcpsocket.hMyTcpsocket.hclient.cppserver.cppCMak…
阅读更多...
01.4进程原理和系统调用---＞经典的CFS调度器

01.4进程原理和系统调用---＞经典的CFS调度器

进程的一些正常状态 什么是进程 操作系统作为硬件的使用层&#xff0c;提供使用硬件资源的能力&#xff0c;进程作为操作系统使用层&#xff0c; 提供使用操作系统抽象出的资源层的能力。 进程&#xff1a;是指计算机中已运行的程序。进程本身不是基本的运行单位&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023