Attack on Life ⚔️

JS中实现私钥导出公钥

发表于 2022-03-06 更新于 2025-03-12 本文字数： 875 阅读时长 ≈ 1 分钟

本文是作者对JS中实现私钥导出公钥的介绍，包括JS中实现私钥导出公钥的优势、实现细节、相关资料等，这些步骤可以帮助作者提高JS中实现私钥导出公钥的效率。

有需求前端实现基于私钥导出公钥，调研了几个方案，最终解决，这里总结下。

解决办法

使用node-forge，该库支持浏览器端/Node服务端，因此前端可用。

如下贴出Node下如何使用

const forge = require('node-forge');// 浏览器端，更换为import或者直接script导入JS模块即可

const privateKeyPem = fs.readFileSync(`${__dirname}/client1.key`, {
  encoding: 'utf8'
}); // client1为pem格式私钥文件

const forgePriKey = forge.pki.privateKeyFromPem(privateKeyPem);
const forgePubKey = forge.pki.setRsaPublicKey(forgePriKey.n, forgePriKey.e);
const publicKeyPem = forge.pki.publicKeyToPem(forgePubKey);

阅读全文 »

iTerm2下实现点击文件唤起IDE

发表于 2022-03-04 更新于 2025-03-12 本文字数： 1.4k 阅读时长 ≈ 2 分钟

本文是作者对iTerm2下实现点击文件唤起IDE的介绍，包括iTerm2下实现点击文件唤起IDE的优势、实现细节、相关资料等，这些步骤可以帮助作者提高iTerm2下实现点击文件唤起IDE的效率。

终端下光标移动到文件路径上，⌘+click可以触发执行某个命令，比如点击一个项目文件夹，触发WebStorm，但是有时我希望不同的文件类型，触发不同的动作，这样就需要自定义脚本进行拓展。

解决方案

实现方案如下，因为个人Shell渣渣，为了方便，实际打开IDElogic使用JS编写，只是在shell中执行nodejs

阅读全文 »

React中的ref

发表于 2022-03-01 更新于 2025-03-12 本文字数： 2.8k 阅读时长 ≈ 5 分钟

本文是作者对React中的ref的介绍，包括React中的ref的优势、实现细节、相关资料等，这些步骤可以帮助作者提高React中的ref的效率。

React中ref还是很常用的，它使父组件具备操作子组件/原生DOM的能力，比如控制一个modal组件弹窗显示等等。但使用上有时会遇到一个不注意的坑，这里梳理下。

ref挂载元素成功后，并不会触发组件重新渲染

有时会将useEffect依赖中增加ref或者ref.current，但实际上当ref中引用的组件被挂载后，ref.current虽然已经保存了实例引用，但组件并不会触发重新渲染，更别说effect重新执行了，因此遇到此类需求需要修改方案来解决，方法如下

ref的使用，可以直接ref对象赋值，也可以callback，两种方式本身作用是一致的，唯一区别是如果想在挂载时执行一些动作，可以使用callback，举个🌰

function App() {
  const pElRef = useRef<any>();
  const [refresh, setRefresh] = useState(0);
  useEffect(() => {
    console.log('render?');
  }, [refresh]);

  const onAttached = useCallback((ref) => {
    if (refresh === 0) {
      setRefresh(refresh + 1);
    }
    pElRef.current = ref;
  }, [refresh]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo"/>
        <p ref={onAttached}>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

如上，增加state参refresh，在挂载成功时修改从而做到重新渲染。

HOC下的ref传递

使用组件时有几个参数是特殊的，比如key，又或者是ref。它们并非属于props，react下会进行特殊处理，比如在HOC下，就需要注意。

阅读全文 »

关闭恼人的微信网址拦截

发表于 2022-02-27 更新于 2025-03-12 本文字数： 2.6k 阅读时长 ≈ 4 分钟

本文介绍关于关闭恼人的微信网址拦截，包括使用场景、实现细节等，以提高关于关闭恼人的微信网址拦截的效率。

在微信中打开一些网页时总会出现以下拦截提醒，遇到这种情况时必须点击继续访问。技术人不忍这种流氓事，于是着手从技术上解决这个体验问题。

Tampermonkey浏览器插件

首先想到的是这个方案，解决步骤如下

Chrome浏览器下安装插件Tampermonkey（油猴）

插件中增加如下脚本，该脚本我已已经开源，不想了解具体实现的直接安装即可。

// ==UserScript==
// @name         Redirect URL
// @namespace    https://1991421.cn
// @version      0.1
// @description  解决恼人的网页拦截，比如微信打开链接
// @author       Alan He
// @match        https://weixin110.qq.com/cgi-bin/mmspamsupport-bin/newredirectconfirmcgi*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at document-end
// ==/UserScript==

(function() {
    'use strict';
     function htmlDecode(input) {
        var doc = new DOMParser().parseFromString(input, 'text/html');
        return doc.documentElement.textContent;
      }

    if(window.location.href.match(/^https:\/\/weixin110.qq.com\/cgi-bin\/mmspamsupport-bin\/newredirectconfirmcgi/)){
      window.location.href=htmlDecode(cgiData.url);
    }
})();

如上操作后，当访问拦截被拦截，也会快速跳转到目标网页。

阅读全文 »

组件库文档搭建-Storybook

发表于 2022-02-25 更新于 2025-03-12 本文字数： 1.6k 阅读时长 ≈ 3 分钟

本文介绍关于组件库文档搭建-Storybook，包括使用场景、实现细节等，以提高关于组件库文档搭建-Storybook的效率。

最近参与组件库开发，为更好的推广使用组件库，需要搭建下文档。调研了几款组件库文档框架，务实的选择了storybook，因为其流行且满足诉求。

框架简单，但还是踩了些坑，这里mark下。

使用

# 初始化
$ npx sb init

# 热启动，即可WEB浏览
$ npm run storybook

阅读全文 »

0%