limkim的个人博客

问题背景前段时间同事反馈了一个诡异的问题：页面打开后操作按钮被禁用，但是登录的账户是超管，所有权限都有，而且刷新页面后就恢复正常，也不能复现了。先说下权限控制的大致流程：通过 vue 路由 beforeEach，请求权限列表，然后存储在 sessionStorage，然后用的时候读取出来处理按钮的禁用。 由于不能复现，只偶现过几次，其中排查了后端返回，是正常的，问题大概率在前端，但由于没法复现看了代码也实在没什么漏洞，也就没有继续跟踪。结果今天偶然间复现了：关掉其他 tab 栏，在地址栏 Ctrl+V 粘贴有问题页面的地址，回车，就能复现。 问题排查复现后第一件事先看 sessionStorage，果然是空的，但是权限的请求与存储是在 beforeEach 中，不存上按理说是不能 next()渲染页面的，百思不得其解，于是准备打开 devtools 再复现一遍，看下接口和控制台有没有报错。结果奇了怪了，就像薛定谔的错误，打开 devtools...

问题nodemon 启动后端的 node 项目，在处理有些接口时会莫名重启，导致后续服务出现 500 问题原因由于部分数据存储在根目录/data 目录下的 json 里，nodemon 默认启动时会监听所有这些文件，而部分接口会修改 json 中的数据，所以此时 nodemon 会重启项目。 参考：Nodemon keeps restarting server 解决方法可以在根目录添加一个 nodemon.json，配置忽略目录： 123{ "ignore": [".git", "node_modules/", "dist/", "coverage/"]}

在 Node.js 中，pipe 是一个非常有用的方法，它用于在可读流和可写流之间建立管道，从而实现数据的传输。在上下文中，可读流通常是从一个数据源（比如网络请求、文件读取等）获取数据，而可写流则是将数据写入到目标（比如网络响应、文件写入等）。 在示例中，response.data.pipe(res) 的作用是将来自 Axios 请求的响应数据流（可读流）传递给 Express 响应对象（可写流），这样就可以直接将来自目标服务器的响应数据流传递给客户端，而无需将整个响应数据存储在内存中。 使用 pipe 方法可以大大简化数据传输的过程，并且在处理大量数据时能够有效地减少内存占用。 1234567891011121314151617181920212223242526272829303132const express = require("express");const axios = require("axios");const app = express();app.get("/forward", async...

背景：我的网站有一个类似 TODO 的服务，功能就是前端传入一个字符串，后端进行 base64 编码，前端展示的时候解码。平时主要都是存一些英文链接什么的，今天偶然传入一段中文后，页面报错。 排查：报错是 URI malformed，说明应该是使用 URI 相关函数出了问题，看了后端返回的内容，拿去在别的网站进行解码，正常，而且在这个网站编码后，与后端的结果一致。因此跑去翻看网站代码： 123456export function base64ToPlain(base64: string) { const utf8 = [...window.atob(base64)] .map((item) => "%" + item.charCodeAt(0).toString(16)) .join(""); return decodeURIComponent(utf8);} 这是解码的函数，定位到应该是解码decodeURIComponent出现了问题，断点调试发现，utf8...

注意！！！此方法由于 OpenClash 的 bug 不再适用！！问题：之前在使用 OpenClash 进行代理时，发现手机谷歌应用商店浏览正常，但是无法下载应用，一直转圈加载，切换过 OpenClash 模式，fakeIP，redir host 均出现该问题，但是当手机开启代理软件时，就一切正常。 前期尝试：既然手机使用 CFA 就正常，那么极有可能是 DNS 出现问题，鉴于我使用了 ADGuard Home 作为 dnsmasq 的上游服务器进行广告拦截，首先进行了误判断排查，但是从进入到下载均没发现误判，同样的，关闭 ADGuard Home、开启 OpenClash 的 DNS 劫持、使用全局模式均不奏效。 后面转战 Google，逛了 V2EX、Clash 仓库 Issue，发现有人有类似问题，他们确定是 DNS 问题，于是更换 DNS，从 8.8.8.8，1.1.1.1，233.5.5.5 等等都试过，还是老样子，陷入窘境。直道今天，每次更新应用，都要打开 CFA。期间虽然尝试过几次，都以失败告终。 解决方法：今天进行常规更新 ACL4SSR 规则，升级...

与 display: inline;等的特性有关 参考：同样是 100%大小，换成 canvas 就会多出滚动条 #程序员 - 抖音 (douyin.com)

参考下面的文章： 前言在處理響應式多選表單時，使用 v-model 綁定陣列類型的資料，用 ref() 沒問題，但用 reactive() 卻行不通 QQ ～為什麼～～～ 就是下面這個範例： 當初在響應式篇章，明明說 object 和 array 可以用 reactive() 來做響應的？我就很開心的把 ref() 改成 reative() 了！ 結果大踩坑，Vue 不會報錯或警告，但資料就是沒辦法響應。 這裡為懶得打開 Vue 開發環境的人做了個線上 DEMO 範例。 總之，我和讀書會夥伴就踏上了找尋真相的路途～！在進入原始碼之前，想拋出個問題讓大家想想，這也會是等等研究原碼的重點。 『你有想過 v-model 是透過「改動原陣列」還是「創造新陣列」的方式來更新值嗎？』 v-model 是 Vue 提供的雙向綁定指令，在每次觸發事件時，會「更新」綁定的變數。為什麼要強調「更新」？這跟 Javascript 的型別有關。 綁定基本型別當綁定的變數為基本型別，就沒有什麼好討論的，基本型別本身就是 immutable，必須直接將新值賦值給綁定變數。 1const text =...

我脑海中立刻闪现了《Head First 设计模式》里讲的： Publishers + Subscribers = Observer Pattern “哼哼，我知道答案了，兄 dei！”，我内心无比鸡冻。 “它们是一样的。”，我故作镇定，嘴角露出一丝微笑，仿佛下一秒钟面试官就会给我发 offer。 面试官也笑了，“ 不，它们不一样 ”。 然后我就： So, 为什么我错了？观察者模式（Observer pattern），和发布订阅模式（Publish–subscribe pattern），到底有什么不同？ 观察者模式所谓观察者模式，其实就是为了实现 松耦合(loosely coupled) 。 用《Head First...

记录问题解决，简单粗暴。12console.log()(function(){})()12 像上面这种格式就会出现上面的报错，自调用函数前面的代码后面要记得加分号（；）。如下： 12console.log();(function () {})(); 原文

在 MongoDB 创建用户账号遇到了 这个问题1234uncaught exception: Error: couldn't add user: Could not find role: root@admin :_getErrorWithCode@src/mongo/shell/utils.js:25:13DB.prototype.createUser@src/mongo/shell/db.js:1367:11@(shell):1:1 这个意思是说 roles 里没有 root 这个关键字就是用户的 roles 不能用 root 这个关键字报错原因是因为除了 admin 其他的角色(roles)不能用 root,其他的用户的角色(roles)是有固定的写法 比如(readWrite)解决方法改变 roles 的值 角色有：Read：允许用户读取指定数据库readWrite：允许用户读写指定数据库dbAdmin：允许用户在指定数据库中执行管理函数，如索引创建、删除，查看统计或访问 system.profileuserAdmin：允许用户向 system.users...