Skip to main content

cnpm手动同步npm

· One min read

需求场景​

在自己发布一个npm包之后，如果立即使用cnpm安装，则无法找到该安装包，因为还没有同步过来，总不能慢慢等cnpm同步。好在cnpm有个手动同步的工具。

解决方案​

https://npm.taobao.org/sync/+ 包名
https://npmmirror.com/sync/+包名

/etc/rc.local,/ect/profile.d/,.bash_profile的区别

· 2 min read

主要区别​

  • /etc/rc.local

最先执行，在登录之前执行

设置开机启动任务，应该放在rc.local中执行，它只会在系统启动时执行一次。

  • /etc/profile.d/

其次执行，需要登录，针对所有用户

设置环境变量的脚本，可以放在profile.d目录下面，但开机执行任务不应该放在profile.d目录下，因为每次登陆都会执行profile.d目录下的文件，会导致重复执行

  • .bash_profile

最后执行，需要登录，只针对当前用户

开机脚本执行顺序​

  1. 通过/boot/vm进行启动 vmlinuz
  2. init /etc/inittab
  3. 启动相应的脚本，并且打开终端
  4. rc.sysinit
  5. rc.d(里面的脚本）
  6. rc.local
  7. 启动login登录界面 login
  8. 在用户登录的时候执行sh脚本的顺序，每次登录的时候都会完全执行的
  9. /etc/profile.d/file
  10. /etc/profile
  11. /etc/bashrc
  12. /root/.bashrc
  13. /root/.bash_profile

前端开发基础环境搭建

· One min read

编辑器及插件​

  • Vscode 编辑器
    • Path Intellisense（路径自动补全）
    • Live Server（开发Server）
    • Vscode-icons（文件图标美化）
    • GitLens（git 可视化增强）
    • Git graph（git 可视化增强）
    • Prettier（代码格式化）
    • Eslint（代码格式化）
    • One dark pro（编辑器主题美化）
    • Volar（vue插件）
    • Vue VSCode Snippets（vue 代码补全插件）
    • Remote Development（远程开发）
  • 微信开发者工具

软件环境​

  • nvm(*nix) 或 nvm-windows(windows)
  • git

浏览器插件​

  • Vue Devtools
  • FeHelper

系统环境​

windows系统推荐安装wsl2，ubuntu18.04

基础知识了解​

Markdown的加粗不生效，出现**内容：**

· 2 min read

场景复现：​

用语雀的编辑器编写文档，然后导出markdown格式，然后在vs code编辑器预览的时候会发现有时候加粗没有生效。出现的场景是加粗的内容中含有标点符号。如**您好：**

原因：​

首先这是正常现象，不是bug。markdown的语法就是这样的。

加粗的方式是前后一对**标记实现的，前面的叫左定界符，后面的叫右定界符。

左定界符生效条件：

  1. 后面不能是空白；
  2. 当前面没有空白或标点符号时，后面不能是标点符号。

右定界符生效条件：

  1. 前面不能是空白；
  2. 当后面没有空白或标点符号时，前面不能是标点符号。

解决方案：​

一般出现加粗不生效的情况，都是由于 加粗的内容里最后一位是标点符号 的原因。只需要在右定界符后面加一个空格即可。如**您好：** 欢迎。

参考文章：​

为什么掘金的 Markdown 加粗语法（**……**）有时候不生效？ - 掘金 (juejin.cn)

vscode配置eslint

· One min read

步骤一​

安装eslint插件

步骤二​

打开全局配置,添加如下配置

 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "eslint.autoFixOnSave" : true,
  },

基于Oauth2.0，JWT的SSO单点登录

· 3 min read

需求场景​

当公司网站越来越多时，还是希望账号能打通，登录公司a网站后，打开b网站需要登录时可以不用输密码直接登录，主要是方便用户登录，简化流程，不用记那么多的密码。单点登录可以说是这一痛点的解决方案了。

常用解决方案​

方案一：基于cas认证的单点登录​

如果公司使用java技术栈，接入开源的cas是很不错的。

apereo/cas: Apereo CAS - Identity & Single Sign On for all earthlings and beyond. (github.com)

方案二： 基于oauth2.0授权的单点登录​

研究下来，发现oauth2.0授权和cas认证的核心流程思想基本一样。没啥太明显的区别。cas是个开源的框架，直接接入，开箱即用，省心。而oauth2.0只是个授权协议规范而已，具体怎么实现要自己去写，目前网上也没有什么比较好的类似于cas这种可以开箱即用，稳定维护的项目。所以与其接入一个不怎么靠谱的开源项目，不如搞懂流程，方便后续的踩坑。

  1. 用户访问a网站需要登录，a网站后台跳转sso认证中心，
  2. sso认证中心根据cookie判断用户未登录，弹出登录页面
  3. 用户填完密码，sso校验后生成一次性鉴权码code，设置cookie，session 并携带code重定向至a网站前端页面
  4. 前端页面获取url参数中的code，向a网站后台发送ajax请求
  5. 后台接收到code请求sso认证中心
  6. sso认证中心返回access_token
  7. 后台获取accessToken并保存，返回前端自己的鉴权accessToken
  8. 前端获取a网站的accessToken，登录成功
  9. 用户访问b网站要登录，b网站后台跳转sso认证中心
  10. 由于访问a网站时，sso留下了cookie，现在sso根据cookie和session知道用户已经登录过，不再弹出登录框，直接返回code
  11. 后续流程保持不变

方案三：基于第三方收费的sso服务​

相关开源项目​

  1. apereo/cas: Apereo CAS - Identity & Single Sign On for all earthlings and beyond. (github.com)
  2. authelia/authelia: The Single Sign-On Multi-Factor portal for web apps (github.com)

禁止html缓存

· One min read
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

SPA应用Oauth2.0登录accessToken的获取

· 5 min read

需求场景​

之前在做微信公众号开发时，一直是前端需要登录时，跳转后台提供的登录页面，后台会重定向至微信的用户授权页面，用户点击登录之后微信会回调到后台的登录结果页并且携带code，后台结果页拿到code，调用微信的接口获取accessToken，然后将accessToken通过重定向url参数的方式返回到SPA。这样虽然前端部分简化了登录流程，但是也带来一个安全隐患。accessToken是通过url参数重定向到前端的，如果用户直接分享这个带accessToken的页面，就会出现accessToken泄露的问题，未登录的用户打开会变成已经登录的状态。之前为了解决这个隐患，都是前端在获取accessToken的同时，在url中删除accessToken参数并刷新页面。虽然能解决问题，但是不是很优雅，总觉得这样不好，更希望accessToken是通过cookie httpOnly方式获取，这样在url上就不会体现，安全上要好很多。也不需要做url参数隐藏的处理。

常规方案​

更通用的方案是前端去重定向至微信用户授权页面，用户授权后再重定向至前端页面并且携带code，前端再通过ajax请求后台获取到accessToken。这样的话，accessToken就不会暴露在url上面。不过依旧有一个问题，就是code也是通过url参数传递到前端的，那还是绕不过一个问题，用户直接将带code的页面分享出去。搜了半天也没看到有人有类似的疑问。我的考虑是获取code的页面往往是一个专门用来处理登录问题的路径如/login?code=这个页面只会短暂停留，ajax获取到accessToken后就会跳走，用户不会或者来不及分享这个页面。此外最重要的这个code是只能使用一次的，登录了就不能使用了。accessToken不一定都会这么做。

2022-5-9更新​

常规方案和我之前使用的方案其实核心就一点不同，前端是直接获取accessToken还是先获取code，再通过code获取accessToken。这就要回到oauth2.0设计的初衷了，他为什么需要一个中间的code，而不直接返回accessToken呢？我之前的做法其实就相当于丢弃了oauth2.0的code，直接获取accessToken。后来才发现原来我所考虑的弊端就是oauth2.0设计code的原因啊，就是比直接获取accessToken安全了一丢丢。之前看Oauth2.0的介绍时也只是知道流程，确实没考虑过人家为什么要多此一举，设计一个中间code。至于为什么没有人和我有一样的安全疑问，估计一种是和我一样知道怎么用不知道为什么这么设计的，我也不关心你们为啥这么设计，反正我按你的规范来了，一种是真的理解了oauth2.0规范也就没啥疑问了。

相关参考​

https://jcbaey.com/oauth2-oidc-best-practices-in-spa/

wordpress子主题开发

· 2 min read

需求场景​

如果购买了一个wordpress主题，并且以此作为基础二次开发，后面该主题更新，希望同步更新的情况下，需要子主题。如果不需要同步原主题的开发就不要子主题，直接修改就完事。

子主题的优势​

同步原主题的更新，更新主题的同时不会覆盖自己的定制修改。

子主题的缺点​

对于css文件会加载2份，1份是父主题，1份子主题。子主题的css覆盖父主题的样式实现修改的功能。这样做就会导致css代码的冗余，如果子主题css加载慢，甚至会出现先展示父主题的css样式再变成子主题的修改效果。不如直接修改父主题来的优雅简洁。

子主题开发​

假定父主题为_Twenty Twenty-Two_，目录为twentytwentytwo。

  • 步骤一：同级新建twentytwentytwo-child目录
  • 步骤二：在twentytwentytwo-child目录下，新建style.css文件，代码如下，顶部的注释是必须的。

styles.css头部注释文档：https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

/*
 Theme Name:   Twenty Twenty-Two Child
 Template:     twentytwentytwo
 Version:      1.0.0
*/
  • 步骤三：在twentytwentytwo-child目录下，新建functions.php,代码如下。

详细文档：https://developer.wordpress.org/themes/advanced-topics/child-themes/

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version')
    );
}
  • 步骤四：在wordpress后台启用twentytwentytwo-child子主题

最佳实践​

  • template修改

在子主题下，新建和父主题同名模板文件，全覆盖父级模板并调整。

git worktree的使用

· 2 min read

需求场景​

之前在开发sass版后台管理系统时，有超管后台，渠道后台以及普通客户后台。3套代码大部分内容相同，但会根据需求有各自变化的部分，当时是在git仓库中建了3个分支。通过切换分支完成对应开发，在开发过程中，有个问题就是node_modules依赖不一致的问题，每次切换分支node_modules就要重新安装，非常之麻烦。后面想到一个临时的解决方法。将3个分支的代码克隆到3个不同的文件夹。每个文件夹切换到对应的分支，这样就能保持开发各自的分支互不影响。不过这种方式有一个缺点，假如A，B，C3个分支对应A，B，C三个目录。如果不小心在C目录切换到A分支上，就会出现问题。没有一个校验的过程，需要人工去避免这个误操作。为了解决这个问题，git worktree就有了用武之地。

解决方案​

git worktree add ../A -b vA
git push --set-upstream origin vA

通过git worktree的操作，如果在C目录切换到A分支，git会提示错误，无法切换，这样就避免了误操作。

参考文档​

https://zhuanlan.zhihu.com/p/41006726