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

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML