react+koa+vite前后端模拟jwt鉴权过程

路由组件(生成token)

const Router = require('@koa/router')
const jwt = require('jsonwebtoken');
const router = new Router()const mockDbUserInfo = [{nickname: 'xxxliu',username: 'Tom',password: 123456,icon: 'url1'},{nickname: 'xxx',username: 'John',password: 123456,icon: 'url2'},
]const secretKey = 'xxxliu key';router.post('/api/home', async ctx => {ctx.response.body = {msg: '主页',code: 'success'}
})router.post('/api/login', async ctx => {try {const { username, password } = ctx.request.body;//mock查db操作const { nickname, password: pwd, icon } = mockDbUserInfo.find(item => item.username === username) || {};if (!nickname) {ctx.response.body = {msg: "不存在该用户",code: "failed",};return;}if (pwd !== password) {ctx.response.body = {msg: "密码输入错误",code: "error",};return;}// 构建 JWT 头部const header = {alg: 'HS256', // 签名算法,例如使用 HMAC SHA-256typ: 'JWT', // Token 的类型};const payload = {username};const options = {expiresIn: '1h', // 设置 JWT 的过期时间header, // 将 header 选项包含在 options 中};//生成tokenconst token = jwt.sign(payload, secretKey, options);ctx.response.body = {nickname,icon,code: "success",msg: "登录成功",};ctx.cookies.set('myToken',token,{                maxAge: 1 * 60 * 60 * 1000,       httpOnly: false})} catch (error) {ctx.response.body = error;}
})module.exports = router;

token解析

const jwt = require('jsonwebtoken');const secretKey = 'xxxliu key';
const verifyToken = async (ctx, next) => {try {const { url } = ctx.request;//走登录页不鉴权const requestUrl = url.split("?")[0];const noVerifyList = ["/api/login"];const noVerify = noVerifyList.includes(requestUrl);if (noVerify) {await next();} else {//拿到请求头的参数const authorization = ctx.request.header["authorization"];const username = ctx.request.body["username"];if (authorization.startsWith('Bearer ')) {const token = authorization.slice(7);const { exp, username: userName } = jwt.verify(token, secretKey) || {};if (userName !== username) {ctx.response.body = {code: "error",msg: "无效的token, 请重新登录",};}else if (exp * 1000 > Date.now()) {ctx.response.body = {code: "error",msg: "登录信息已过期, 请重新登录",};} else {await next();}} else {ctx.response.body = {code: "error",msg: "无效的token, 请重新登录",};}}} catch (err) {if (err.name == "TokenExpiredError") {ctx.body = {code: "error",msg: "token已过期, 请重新登录",};} else if (err.name == "JsonWebTokenError") {ctx.body = {code: "error",msg: "无效的token, 请重新登录",};}}};module.exports = verifyToken;

注册中间件

const Koa = require('koa')
const path = require('path')
const sendfile = require('koa-sendfile')
const static = require('koa-static')
const bodyParser = require("koa-bodyparser")
const router = require('./server/api-router.js')
const assets = require('./server/assets-router')
const verifyToken = require('./server/verifyToken.js');
const app = new Koa()// static
app.use(static(path.resolve(__dirname, 'public')))//body
app.use(bodyParser());//midware auth
app.use(verifyToken);// api
app.use(router.routes()).use(router.allowedMethods())// assets
app.use(assets.routes()).use(assets.allowedMethods())// 404
app.use(async (ctx, next) => {await next()if (ctx.status === 404) {await sendfile(ctx, path.resolve(__dirname, 'public/index.html'))}
})app.listen(3000, () => {console.log(`> http://127.0.0.1:3000`)
})

前端请求(登录+打开主页)

import { useState, useEffect } from 'react'
import getTokenFromCookie from './tools'
function App() {const [response, setResponse] = useState({})const token = getTokenFromCookie();useEffect(() => {fetch('/api/login', {method: 'post',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${token}`,},body: JSON.stringify({username: 'Tom',password: 123456})}).then(res => res.json()).then(res => {setResponse(res);})// fetch('/api/home', {//   method: 'post',//   headers: {//     'Content-Type': 'application/json',//     'Authorization': `Bearer ${token}`,//   },//   body: JSON.stringify({//     username: 'Tom',//     password: 123456//   })// })//   .then(res => res.json())//   .then(res => {//     setResponse(res);//   })}, [])const { nickname, icon, msg } = response || {}return (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{nickname ? <div><h1>icon: {icon}</h1><h1>nickname: {nickname}</h1><h1>msg: {msg}</h1></div>: <h1>msg: {msg}</h1>}</div>)
}export default App

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式二十三:模板方法模式(Template Method Pattern)

定义了一个算法的框架&#xff0c;将算法的具体步骤延迟到子类中实现。这样可以在不改变算法结构的情况下&#xff0c;允许子类重写算法的特定步骤以满足自己的需求 模版方法使用场景 算法框架固定&#xff0c;但具体步骤可以变化&#xff1a;当你有一个算法的整体结构是固定…

android Junit4编写自测用例

10多年的android开发经验&#xff0c;一直以来呢&#xff0c;也没有使用过android自带的测试代码编写。说来也惭愧。今天也花了点时间稍微研究了下。还挺简单。接下来就简单的说一下。 新建工程 直接默认新建一个工程&#xff0c;就会有两个目录androidTest和test(unitTest)两…

mac下安装tomcat

1. 官网下载Apache Tomcat - Apache Tomcat 9 Software Downloads 2. 授权bin目录下所有.sh文件权限sudo chmod 755 *.sh 3. 启动程序(后台运行) sudo sh ./startup.sh 4. 在当前窗口启动程序&#xff0c;随时看到日志sudo sh ./catalina.sh run 5. 关闭程序 sudo sh ./shu…

CSS中如何改变鼠标指针样式(cursor)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中改变鼠标指针样式&#xff08;cursor&#xff09;⭐ 示例&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅…

解决Graphics2D造成的中文乱码问题

解决Graphics2D 分别在 linux下与docker下的乱码问题 一、linux 下载宋体&#xff0c;并将宋体文件拷贝到/usr/share/fonts/chinese下&#xff0c;下载地址宋体&#xff0c;或从本地window的C:\Windows\Fonts下复制。安装字体索引工具 yum install -y mkfontscale yum instal…

免费OCR图像识别文字识别API

免费OCR图像识别文字识别API 一、OCR图像识别文字识别二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、温馨提示 一、OCR图像识别文字识别 光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;是指对文本资料的图像文件进行分析识别…

Visual Studio 2022的MFC框架——AfxWinMain全局对象和InitInstance函数

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天我们来重新审视一下Visual Studio 2022下开发工具的MFC框架知识。 在看这篇帖子前&#xff0c;请先看我的另一篇帖子《Visual Studio 2022的MFC框架——应用程序向导》。 当程序调用了CWinApp类的构造…

No message found under code ‘-1‘ for locale ‘zh_CN‘.

导出中的报错&#xff1a;No message found under code -1 for locale zh_CN. 报错原因&#xff1a;页面中展示的数据和后端excel中的数据不一致导致 具体原因&#xff1a;

【C语言】#define 宏定义初步使用

使用宏定义可以防止出错&#xff0c;提高可移植性&#xff0c;可读性&#xff0c;方便性等。 下面列举了一些成熟软件中常用的宏定义。 重新定义一些基本类型 重新定义一些类型&#xff0c;防止由于各种平台和编译器的不同&#xff0c;而产生的类型字节数差异&#xff0c;方便…

java springboot sql防注入的6种方式

​在Spring Boot中&#xff0c;可以通过使用参数绑定、预处理语句和使用ORM框架等方式来防止SQL注入。以下是几种常见的方式&#xff1a; 1. 参数绑定&#xff1a;通过使用参数绑定&#xff0c;将用户输入的数据作为参数传递给SQL语句&#xff0c;而不是将其直接拼接到SQL语句中…

【记录】Truenas scale|NFSv4数据集的子目录或文件的ACL完全访问权限继承老是继承不了怎么回事

我遇到了数据集下新建文件夹或文件&#xff0c;新建的文件夹或文件没有和数据集的ACL设置相符合的情况。其根本原因是NFSv4的完全访问权限要想继承的话&#xff0c;它的访问设置权限要设置“用户”和“组”的&#xff0c;就是&#xff0c;一定要选择中文的那个设置。纯owner和g…

FairyGUI编辑器的弹窗操作【插件】

之前在FairyGUI编辑器菜单扩展中&#xff0c;我使用了App.Alert("复制失败")来提示操作是否成功。这篇则会说一下我们可以使用的弹窗提示&#xff0c;以及做到类似资源发布成功时的“发布成功”飘窗。 打开APP的API脚本&#xff0c;可以看到有很多公开方法&#xff…

数字化技术无限延伸,VR全景点亮智慧生活

随着互联网的发展&#xff0c;我们无时无刻不再享受着互联网给我们带来的便利&#xff0c;数字化生活正在无限延伸&#xff0c;各行各业也开始积极布局智能生活。要说智慧生活哪个方面应用的比较多&#xff0c;那应该就是VR全景了&#xff0c;目前VR全景已经被各个行业广泛应用…

观察者模式简介

概念&#xff1a; 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;用于在对象之间建立一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;其相关依赖对象会自动收到通知并进行相应处理。 特点&#xff1a; 松耦合&a…

HT for Web (Hightopo) 使用心得(6)- 3D场景环境配置(天空球,雾化,辉光,景深)

在前一篇文章《Hightopo 使用心得&#xff08;5&#xff09;- 动画的实现》中&#xff0c;我们将一个直升机模型放到了3D场景中。同时&#xff0c;还利用动画实现了让该直升机围绕山体巡逻。在这篇文章中&#xff0c;我们将对上一篇的场景进行一些环境上的丰富与美化。让场景更…

《C和指针》笔记16:赋值容易出现的误区: 赋值截短

在下面的语句中&#xff0c;认为a和x被赋予相同的值的说法是不正确的&#xff1a; a x y 3;它等价于 a (x y 3);如果x是一个字符型变量&#xff0c;那么y3的值就会被截去一段&#xff0c;以便容纳于字符类型的变量中。那么a所赋的值就是这个被截短后的值。在下面这个常…

【C语言基础】变量类型,Static关键字的使用

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

Effective C++条款20——宁以pass-by-reference-to-const替换pass-by-value(设计与声明)

缺省情况下C以by value方式&#xff08;一个继承自C的方式&#xff09;传递对象至&#xff08;或来自)函数。除非你另外指定&#xff0c;否则函数参数都是以实际实参的复件&#xff08;副本&#xff09;为初值&#xff0c;而调用端所获得的亦是函数返回值的一个复件。这些复件&…

浅谈单例模式在游戏开发中的应用

前言 如果在外部想在不同的时间结点、不同的位置访问某类中的成员且想要保持访问时&#xff0c;成员地址唯一。那么可以考虑将该类声明为静态类&#xff0c;但若是成员中包含公共的数据类型&#xff0c;此时便可以考虑将该类做成一个单例。 单例模式 由于类中的数据&#x…

Leetcode 易错题整理(一)5. 7. 11. 15. 33. 34

5. 最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba&q…