zdppy+vue3+onlyoffice文档管理系统实战 20240901 上课笔记 基于验证码登录功能基本完成

本文主要是介绍zdppy+vue3+onlyoffice文档管理系统实战 20240901 上课笔记 基于验证码登录功能基本完成,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

遗留的问题

  • 1、点击切换验证码
  • 2、1分钟后自动切换验证码

点击切换验证码

实现步骤:

  • 1、点击事件
  • 2、调用验证码接口
  • 3、更新验证码的值

点击事件

给图片添加点击事件:

<img :src=" 'data:image/png;base64,' + captchaImg"style="width: 100%; height: 50px; margin-top: 10px; cursor: pointer"@click="refreshCaptcha">

调用验证码接口

const refreshCaptcha = async () => {const captcha = await api.getCaptcha()captchaKey.value = captcha.keycaptchaImg.value = captcha.img
}onMounted(async () => {await refreshCaptcha()
})

1分钟后自动切换验证码

方案1

  • 1、页面挂载的时候,创建定时器,和手动点击切换的逻辑不冲突
  • 2、在页面卸载之前,销毁定时器

方案1:如果手动点击了,验证码的生效时间就不对了。

方案2:

  • 1、在页面挂载的时候创建定时器
  • 2、在页面卸载之前销毁定时器
  • 3、在刷新验证码以后,重新生成定时器:销毁和重新创建

方案2比较靠谱。

实现代码:

// 点击手动刷新验证码
const clickRefreshCaptcha = async () => {await refreshCaptcha()if (autoRefreshTimer.value) {clearInterval(autoRefreshTimer.value)autoRefreshTimer.value = setInterval(async () => {await refreshCaptcha()}, refreshMillionSeconds)}
}// 刷新验证码
const refreshCaptcha = async () => {const captcha = await api.getCaptcha()captchaKey.value = captcha.keycaptchaImg.value = captcha.img
}// 生命周期函数:页面挂载
onMounted(async () => {await refreshCaptcha() // 收到刷新定时器autoRefreshTimer.value = setInterval(async () => { // 定时刷新验证码await refreshCaptcha()}, refreshMillionSeconds)
})// 生命周期函数:页面卸载之前
onBeforeUnmount(async () => {clearInterval(autoRefreshTimer.value) // 卸载自动刷新验证码的定时器
})

接下来要做什么

  • 1、实现校验验证码的功能
  • 2、验证码校验通过以后再校验的功能

校验验证码

封装校验验证码的方法

isCaptcha: async (key, code) => {let ok = falseawait axios({method: "post",url: `http://127.0.0.1:18888/zdppy_captcha`,data: {key, code}}).then(resp => {if (resp.data && resp.data.data && resp.data.status && resp.data.code === 10000) {if (resp.data.data.ok) {ok = true}}})return ok
}

在校验登录之前先校验验证码

const ok = await api.isCaptcha(captchaKey.value, data.captcha);
if (!ok) {// TODO: 验证码框架应该再被使用以后自动移除该keyalert("验证码错误,请刷新之后重试")return
}
alert("验证码校验成功")
return

优化验证码框架

确保key只能被使用一次,更安全。

import zdppy_captcha as captcha
import zdppy_cache as cache# 系统的验证码
key, code, img = captcha.get_base64(4)
print(key)
print(code)
print(img)# cache_obj 只有有set方法就行
# 存储验证码
cache_obj = cache.Cache("tmp/.zdppy_captcha")
cache_obj.set(key, code)# 用户的验证码
user_key = key
user_captcha = code# 校验
v1 = captcha.is_captcha(cache_obj, user_key, user_captcha)
print(v1, v1 == True)# 使用一次以后,就失效
v1 = captcha.is_captcha(cache_obj, user_key, user_captcha)
print(v1, v1 == False)

封装发送登录请求的方法

login: async (username, password) => {let ok = falseawait axios({method: "post",url: `http://127.0.0.1:18888/auth/user/login`,data: {username, password}}).then(resp => {if (resp.data && resp.data.data && resp.data.status && resp.data.code === 10000) {ok = true} else {message.error(resp.data.data.msg)}}).catch(err => {message.error(err.message)})return ok
}

封装清空验证码的逻辑

// 点击登录
const onFinish = async (data) => {// 校验验证码let ok = await api.isCaptcha(captchaKey.value, data.captcha);if (!ok) {await clearCaptcha()message.error("验证码错误")return}// 发送登录请求ok = await api.login(data.username, data.password)if (ok) {message.success("登录成功")} else {await clearCaptcha()}
};// 清空验证码
const clearCaptcha = async () => {formState.captcha = ""await clickRefreshCaptcha() // 模拟点击操作
}

登录成功的响应

在这里插入图片描述

完整登录方法

// 点击登录
const onFinish = async (data) => {// 校验验证码const ok = await api.isCaptcha(captchaKey.value, data.captcha);if (!ok) {await clearCaptcha()message.error("验证码错误")return}// 发送登录请求const loginData = await api.login(data.username, data.password)console.log("xxx登录信息:", loginData)if (loginData) {message.success("登录成功")} else {await clearCaptcha()}
};

到这一步以后,登录完成一大半了。

遗留问题

  • 1、登录以后跳转最近文档
  • 2、如果用户没有登录应该自动跳转登录页面
  • 3、如果用户的token校验失败,应该自动调整登录界面

这篇关于zdppy+vue3+onlyoffice文档管理系统实战 20240901 上课笔记 基于验证码登录功能基本完成的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1128811

相关文章

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi