开源,敞开大门:Hacktoberfest 4 总结

开源,敞开大门:hacktoberfest 4 总结

连续四个星期的 Hacktoberfest 后,我​​终于完成了挑战,并获得了 4 个已批准的 PR。我不得不承认,在这次活动开始时我感到非常紧张,因为开源感觉像是超出了我的舒适区。然而,从较小的问题开始帮助我建立了信心,很快,我就有动力去寻找更复杂的问题来解决。我认为这种动力的一部分来自于学生时代——为开发者社区做出贡献让我感受到了现实世界的体验。

如果您想了解更多有关我的 Hacktoberfest 旅程的信息,请随时查看我的个人页面,其中我记录了每次 PR 后的反思。但事不宜迟,让我们深入探讨我最后一周的公关。

Mikochi 概述:极简远程文件浏览器

Mikochi 是一款轻量级、自托管的远程文件浏览器,非常适合用户管理私人服务器或 NAS(网络附加存储)上的文件。该工具允许用户轻松浏览远程目录,执行文件管理任务,例如上传、下载、重命名和删除文件,甚至将媒体文件直接流式传输到 VLC 或 MPV 等播放器。

Mikochi 采用由 JavaScript/Preact 提供支持的现代 Web 界面以及 Go/Gin 中的 API 后端构建,为远程文件浏览提供无缝且响应迅速的体验。

我所做的工作

在这个项目中,我解决了与增强 Mikochi 中的用户控制和安全性相关的问题,我实现了可通过应用程序导航栏中的“注销”按钮访问的注销功能。此功能旨在通过清除身份验证令牌并将用户重定向到登录页面来安全地注销用户。在前端,注销按钮会触发对新 /logout 端点的 API 调用,从本地存储中清除 JWT,并刷新或重定向页面以确保用户完全注销。在后端,我通过将令牌 ID 添加到无效令牌列表来构建处理 /logout 端点的逻辑。在 JWT 身份验证中间件中检查此列表,确保任何带有无效令牌的请求都会被拒绝并返回 403 响应。此功能提高了 Mikochi 的安全性,帮助用户控制活动会话并保护他们在共享或公共设备上的帐户。

解决方案

在此 PR 中,我为 Mikochi 实现了安全注销功能,解决了前端和后端要求,以增强用户会话控制。在前端,我创建了一个 Logout 组件来处理对 /api/logout 的 API 调用并从本地存储中清除 JWT。当用户单击“注销”时,JWT 将被删除,POST 请求将发送到后端以验证注销,并且页面使用 window.location.href 将用户重定向到主登录屏幕。在后端,我修改了generateAuthToken()中的JWT生成以包含ID属性,从而允许令牌有效地失效。然后,我在 backend/auth/handlers.go 中添加了一个处理程序,通过将 JWT ID 附加到无效令牌列表来管理注销请求。 JWT 中间件检查每个请求,如果令牌已失效则拒绝访问并返回 403 响应。为了验证功能,我进行了手动测试,在注销后将之前无效的令牌重新插入本地存储,确保任何重用它的尝试都会失败,从而有效地保护注销过程。

我的想法

对我来说,这是一个令人着迷的项目,将后端和前端开发融合到一个项目中。我在前端解决的问题相对简单——创建一个注销按钮,并使用一些 CSS 来改善其外观。我已经学习 React 一段时间了,所以虽然我需要简单回顾一下,但它帮助我理解了源代码中已有的代码和组件。

在后端,项目所有者使用 Docker 将项目容器化,这对我来说是熟悉的基础。然而,最耗时的部分是使用该项目的后端语言 Go。我之前没有使用 Go 的经验,但是解决这个问题让我有机会将其学习到功能级别,我发现这非常有价值。

以上就是开源,敞开大门:Hacktoberfest 4 总结的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1494805.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 16:52:51
下一篇 2025年12月19日 16:53:01

相关推荐

  • 恭喜 Wix Studio 挑战:社区版获胜者!

    等待结束了!是时候宣布 wix studio 挑战赛:社区版的获胜者了。 从国际象棋爱好者和宝石社区到企业家和设计师的专业社区,我们喜欢了解参与者梦想社区平台背后的个性和动机。 感谢 Ania Kubów 承担了为此次挑战选出一位获胜者的艰巨任务。 恭喜… @schemetastic 致力于构建 K…

    2025年12月19日
    000
  • jQuery 中的 “.active” 到底代表什么?

    jquery 中的“active”到底指的是什么? 在 jquery 中,.active 并不是一个预定义的样式。它是一个常见的 css 类,通常用于表示一个元素处于激活或选中的状态。 通常情况下,ui 框架会将 .active 类应用于某个元素,以指示该元素是当前被选中的。该类通常会在 css 样…

    2025年12月19日
    000
  • 如何使用 jQuery 实现可自由折叠功能?

    如何使用 jquery 实现可自由折叠功能 要实现可自由折叠的内容,可以使用 jquery 的点击事件和 css 类。以下是具体步骤: 1. 添加 html 结构 创建包含可折叠内容的 html 结构。例如: 点击折叠 可折叠的内容 2. 添加 css 类 定义用于控制可折叠元素显示和隐藏的 css…

    2025年12月19日
    000
  • 如何使用jQuery实现自由折叠展开效果?

    自由折叠展开效果的jquery代码实现 相信很多开发者都有遇到过类似的需求:需要在页面中实现可以自由折叠展开的元素,比如文章内容的折叠、导航菜单的展开等。下面将介绍一个使用jquery实现此效果的简便代码。 代码实现: onclick=”javascript:fold(this)”function …

    2025年12月19日
    000
  • useReducer 以及它与 useState 的不同之处

    目录 简介何时使用 usestate何时使用 usereducer示例 1:带有 usestate 的计数器应用示例 2:使用 usereducer 的计数器应用示例 3:使用 usereducer 处理表单输入示例 4:使用 usereducer 构建测验应用程序usestate 和 usered…

    2025年12月19日 好文分享
    000
  • 如何使用正则表达式匹配 HTML 中特定类名的 “ 标签?

    js 正则匹配 div 问题 问题描述: 如何使用正则表达式匹配 html 中所有 class 为 “n-item n-item-ad spread-item news-item” 的 标签? 原始正则表达式: 立即学习“前端免费学习笔记(深入)”; var reg = ne…

    2025年12月19日
    000
  • 如何用 JS 和 CSS3 实现右侧浮动带动画效果?

    如何用 js 和 css3 实现右侧浮动带动画效果 您想为网站右侧侧边栏实现类似于 http://www.ustalk.com 网站的浮动效果,鼠标向下滚动时触发动画。要实现此效果,需要使用以下技术: css3 确保您的 css 包含以下代码以定位侧边栏并将其固定在页面右侧: 立即学习“前端免费学习…

    2025年12月19日
    000
  • 如何用JavaScript正则表达式精准匹配特定class属性的li标签?

    js正则匹配div问题 问题: 如何使用javascript正则表达式匹配以下html中的li标签,该标签具有class属性“n-item n-item-ad spread-item news-item”? @@##@@立即学习“Java免费学习笔记(深入)”;……… 尝试的正则表达式:…

    2025年12月19日
    000
  • 全栈开发演变:趋势和最佳实践

    在过去的十年里,全栈开发发生了很大的变化。从对能够处理后端和前端任务的开发人员的不同寻常的责任到成为行业标准,这确实是一段奇怪的旅程。 如今,成为一名全栈开发人员不仅仅意味着兼顾应用程序的两个方面。它涉及掌握一系列技术并通过遵循最佳实践来适应最新趋势。让我们深入了解全栈开发的演变过程、引领全栈开发步…

    2025年12月19日
    000
  • 移动端如何实现导航固定,内容可滑动?

    手机端导航固定,内容滑动的实现 想要在移动端页面中实现上端导航栏固定,下端内容可滑动的效果,可以使用 css 定位来实现。 步骤: 给导航栏设置 position 为 fixed,使其固定在顶部。给可滑动内容设置 position 为 absolute 或 relative,使其可以在导航栏下面滑动…

    2025年12月19日
    000
  • 使用 html css 和 javascript 制作太阳和月亮动画

    Day-Night Toggle body, html { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, s…

    2025年12月19日 好文分享
    000
  • 手机端如何实现固定导航栏并让下方内容可滚动?

    如何实现手机端固定导航栏,实现下拉滚动 在手机端开发中,有时候需要实现固定导航栏,但同时允许下方的内容可滚动。以下是如何使用 css 定位和滚动特性实现这一效果: 步骤 1:创建固定导航栏 在 css 中,将导航栏元素设置 position: fixed;。这将把它固定在浏览器的顶部。 .navba…

    2025年12月19日
    000
  • JavaScript 中的生成式人工智能? Microsoft 的 GenAIScript、Svelte Nextjs 等

    欢迎来到新版“本周 JavaScript ”! 今天,我们从 Microsoft 获得了一些改变游戏规则的更新,即期待已久的 Svelte 5 版本和新的 Next.js 15 版本 – 还有更多!  微软GenAIScript 2024 年都是关于人工智能的,而 Microsoft 正…

    2025年12月19日
    000
  • 如何用 CSS 定位实现手机端页面可下拉,导航栏固定不变?

    如何利用 css 定位实现手机端页面可向下拉动,导航栏固定不变 在移动端页面中,通常需要保持导航栏固定,而允许页面内容向下滚动浏览。实现此效果可以通过 css 定位来实现。 具体步骤: 将导航栏定位为固定定位 header { position: fixed; top: 0; left: 0; wi…

    2025年12月19日
    000
  • “Zenith”——一款使用 React、Tolgee 和 Tailwind CSS 的宁静冥想应用程序

    在这篇文章中,我很高兴与大家分享 zenith,这是一款冥想应用程序,旨在通过精选的舒缓声音、用户友好的界面以及对多种语言的支持来帮助用户平静和集中注意力。我将介绍该应用程序的核心功能、技术堆栈、如何设置以及在 react 中集成 tolgee。 演示 特点 舒缓的声音:用户可以从各种专为增强冥想效…

    2025年12月19日
    000
  • 初次接触 Vite 如何学习?一份循序渐进的路线图

    vite 学习路线图 对于初次接触 vite 的开发者来说,探索学习路径可能令人困惑。以下是一个循序渐进的学习建议: 配置基础 从 vite 配置开始学习是明智的,因为它为理解该工具的运作方式提供了基础。重点关注项目中常用的配置,包括: base:指定要部署应用程序的 URL 基础路径build.o…

    2025年12月19日
    000
  • React 基础知识~单元测试/自定义钩子

    当我测试自定义钩子组件时,我使用从@testing-library/react’导入的renderhook和从react-dom/test-utils’导入的act。 ・src/app.tsx import “./app.css”;import counter from “.…

    2025年12月19日
    000
  • 旅游记事本

    TravelTally – 旅行费用的预算和费用管理工具。 TravelTally 是一款旅行预算规划工具,用户可以通过跟踪与旅行相关的费用(包括机票、住宿和活动)来有效管理自己的财务。用户可以监控他们的预算,查看与分配的预算相比他们花了多少钱,并获得内置 Copilot 助手的帮助。该…

    2025年12月19日
    000
  • 伪元素自动换行问题:如何在限制最大宽度的情况下实现文本内容撑开宽度且不自动换行?

    伪元素自动换行问题 在使用伪元素时,如何让其宽度既能根据文本内容自动调整,又能限制在最大宽度内,并且在小于最大宽度时不自动换行,大于最大宽度时才换行? 问题分析 使用 white-space: nowrap; 虽然可以让文字较少时正常显示,但文字超过最大宽度后不会换行;而使用 word-wrap: …

    2025年12月19日
    000
  • 如何限制伪元素宽度并保持文本包裹?

    限制伪元素宽度同时保持文本包裹 为了让伪元素的宽度适应文本内容并受到最大宽度的限制,同时在小于最大宽度时不自动换行,而在大于最大宽度时才换行,我们需要解决以下问题: 初始宽度问题 伪元素的初始宽度受父元素影响,如果父元素宽度小于最大宽度,则伪元素会在文本量较多时提前换行。为了解决这个问题,我们需要知…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信