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

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Security OAuth2 单点登录流程

单点登录(英语:Single sign-on,缩写为 SSO),又译为单一签入,一种对于许多相互关连,但是又是各自独立的软件系统,提供访问控制的属性。当拥有这项属性时,当用户登录时,就可以获取所有系统的访问权限,不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议(LDAP)来实现,在服务器上会将用户信息存储到LDAP数据库中。相同的,单一注销(single sign-off)就是指

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入,读取速度会加快(但是在字符串的题里面和容易出现问题) 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器,指向键值>= key的第一个元素。 iterator upper_bou

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来