每月进步一点点--202403

13. 如何升级npm包依赖的依赖包版本？

最新项目中被安全工具扫描出许多npm包有安全漏洞，需要升级，瞅了一眼，发现被扫描出来的99%的npm包都是间接依赖包，没法在项目根目录下的package.json中指定版本。而且有些被扫描出来的npm包更特别，同一个npm包要同时升级到两个不同的版本。

正是因为这种特殊情况，促进了我的思考，最后通过直接在yarn.lock文件中修改依赖包的下载版本，解决了这个问题。

json5@2.x, json5@^2.1.2, json5@^2.2.1:
  version "2.2.2"
  resolved "https://registry.npmmirror.com/json5/-/json5-2.2.2.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==

json5@^1.0.1:
  version "1.0.2"
  resolved "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
  dependencies:
    minimist "^1.2.0"

12. rel="noopenner noreferrer"是什么含义?

• noopenner 阻止新打开的页面对原始窗口window.opener对象的访问，防止恶意站点对原始窗口内容进行篡改或导航到其它恶意网站。
• noreferrer 用来禁用http协议头部中的referrer信息，这样做可以防止将原始链接中的敏感信息被携带到目标网站，也防止目标网站通过referrer字段追踪用户来源

11. 企微和微信不走JS-SDK，默认分享卡片的差异是什么？

企微和微信，不通过wx.config注入权限，调用分享接口 wx.updateAppMessageShareData(新api)或wx.onMenuShareAppMessage(老api)设置分享参数标题，描述，链接，缩略图，使用系统默认的右上角弹出的分享菜单进行分享，从企微中分享出去的文章，标题，文章描述和缩略图都是有的，这些内容都是企微自动从文章中爬取的。

而从微信中分享出去的链接，除了分享标题之外，文章描述和缩略图都没有。

另外还发现，如果把页面链接复制出来，在微信中打开，分享出去，不会显示分享卡片，显示的仍旧是链接。说明微信对分享行为的控制，比企微更严格一些。如果要设置分享参数，还是要通过微信JS-SDK的分享接口，更好一些。

10. 意外的一个发现，父组件给子组件传递的属性，如果是个对象，可以在子组件中直接修改父组件传递属性对象中的某个键值

这是父页面，传递给子组件RuleItem的属性subItem是个对象，包含一个label属性

在子组件中,可以使用v-model:value，对父页面传递过来的属性值中的键值item.label直接进行修改。

9. Node+Express+multer上传的文件含有中文时显示乱码，如何解决？

文件名乱码现象如下:

解决中文文件乱码的配置如下：

const express = require("express");
const multer = require("multer"); // 文件上传中间件
const dayjs = require("dayjs");

// 设置multer存储文件的配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function (req, file, cb) {
    // 解决中文名乱码的问题
    file.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");
    cb(null, `${dayjs().format("YYYYMMDD_HHmmss")}-${file.originalname}`);
  },
});

8. VSCode的Live Server扩展，如何设置忽略某些文件的改动？

情景是这样的，写了一个在网页端上传文件，然后保存到服务器端，由于我把前后端的功能都写在一个工程下，用VSCode的Live Server扩展启动网页端index.html,在命令行用node启动的服务器。每次网页端上传文件，服务器端保存文件成功后，由于产生了新的文件，Live Server扩展会自动刷新网页端index.html，导致我想查看文件传输网络请求和响应，无法看到。经过查阅资料，发现只要配置忽略某个文件夹下的文件改动，就可以了。由于我的项目后端文件夹名称是server,在VSCode的设置文件中添加如下配置, server文件夹下的文件生成就不会造成Live Server扩展刷新index.html文件了。

"liveServer.settings.ignoreFiles": [
    "**/server/*.*",
]

7. ant-design-vue在本地开发环境和线上环境，Select选项框的下拉箭头，位置有差异的原因是什么？

• 这是本地开发环境:

• 这是线上环境

线上环境选择框的箭头是垂直居中显示的，本地开发环境，Select选择框中的下拉箭头，明显靠下面一些，看着不太美观。

通过逐个样式仔细的对比，最后发现是ant-select-arrow样式的line-height属性有差异引起的展示差别。

这是本地开发的样式

这是线上环境的样式

最后添加了一个全局样式，修复了这个问题

.ant-select-arrow > .anticon.anticon-down.ant-select-suffix{
  line-height: 1;
}

6. OAuth2.0 认证的优势是什么？

• 用户不再需要直接向第三方应用提供自己的原始账户凭据（如用户名和密码），从而降低了因第三方应用的安全漏洞导致用户账户被盗用的风险。
• 使用令牌（Token）机制，令牌是可以临时且有时限的，即使令牌泄露，也可以通过撤销来减少潜在的危害。
• 不同类型的客户端都能够方便地接入OAuth 2.0授权服务，无论是网页应用、原生桌面应用还是移动设备应用，都能无缝对接。
• OAuth 2.0的令牌可以设置详细的权限范围，使得客户端只能访问被用户明确授权的资源，实现了细粒度的权限控制。 OAuth 2.0允许为不同的客户端分配不同的信任级别，并提供多种授权类型，如授权码（Authorization Code）、隐式授权（Implicit）、资源所有者密码凭证（Resource Owner Password Credentials）、客户端凭证（Client Credentials）和刷新令牌（Refresh Token）等，满足多样化的业务需求。
• OAuth 2.0允许授权服务器集中处理认证和授权，与资源服务器分离，提高了系统的模块化程度和安全性。

5. 微信JS-SDK调用,调用的过程网页是通过http协议和客户端通信，还是通过JS-Bridge方式？

从抓包工具获取到的网页请求来看，只有JS-Bridge的方式说得通。在调用JS-SDK之前，需要加载jweixin-*.js这样的JavaScript库，这个库封装了好多网页端K与微信/企微应用通信的方法，唤起微信/企微 原生应用特定功能。可能企微/微信 App与微信/企微的服务器有http通信，但在网页端抓包是无法获取到的。

4. 微信JS-SDK在调用时为什么需要用户授权？

微信JS-SDK是一套由微信官方提供的，允许网页开发者在网页中调用微信相关功能（如获取用户信息、分享到朋友圈、微信支付等）的JavaScript库。为了保护用户隐私和安全，微信对这些敏感操作设定了严格的权限管理机制。

• 调用微信JS-SDK的部分接口涉及到获取用户的个人信息，例如头像、昵称、地理位置等。为了遵守法律法规并保护用户隐私，微信要求开发者在获取这些信息之前必须获得用户的明示同意。
• 微信规定，任何读取用户个人数据的行为都需要经过用户的授权，即便是静默授权，也是基于用户前期已经授权过的前提下才能实现。非静默授权则更明显地让用户点击"同意"按钮，明确表达其意愿。

微信JS-SDK调用时需要通过OAuth2.0协议或者静默登录的方式获取access_token等凭证，进而调用相应接口。在静默授权模式下，用户无感知，但如果尚未授权过，则会跳转至授权页让用户确认授权；非静默授权则强制用户手动确认授权信息。静默授权仅能获取openid，要获取用户的手机号，头像，昵称等信息，则需要强制授权。

3. 对于模糊查询节流函数的思考

一般模糊搜索，如果是从后台接口查询数据，都会加上一个节流函数，我想了一下，是不是等上一次的查询结果返回后，再发起新的查询请求，更合理一些。这样做，可以有效避免先发出去的查询请求，响应结果返回较慢，覆盖掉后面查询请求的结果。另外也能达到节流的目的

<template>
        <Select
                  v-model:value="formData.taskClientRule.customerGroupId"
                  :allow-clear="false"
                  :disabled="isOnlyRead"
                  style="width: 320px"
                  show-search
                  @search="handleCustomerGroupIdSearch"
                  :get-popup-container="(triggerNode)=>(triggerNode.parentNode as HTMLElement)"
                >
                  <SelectOption v-for="item in customerGroupOptions" :value="item.id" :key="item.id">
                    {{ item.customerGroupName }}
                    </SelectOption>
                </Select>
 </template>
 
 
 <script>
  const loading=ref(false);
  const handleCustomerGroupIdSearch = async(customerGroupName: string) => {
   if(loading.value) return;
    queryCustomerGroupOptions(customerGroupName);
  };
  
  const queryCustomerGroupOptions = (customerGroupName = '') => {
      loading.value=true;
      businessStrategyApi
        .customerGroupList({ customerGroupName, pageNum: 1, pageSize: 20 })
        .then(({ retdata = [] }: TLooseObj) => {
           // ...
        })
        .finally(() => {
          loading.value=false;
        });
  };
 </script>

2.ant-design -vue的Modal组件的使用问题

Modal组件有个confirmLoading属性，用于点击确定按钮的时候，显示正在请求中的加载效果， 然而在接口返回结果出现异常的时候，接口请求已经正常结束，然而确定按钮上的loading动画却仍在加载中。通过在视图中插入Modal组件的方式，支持对这个属性值的修改。然后通过js方法 Modal.confirm创建的模态框，是不支持对这个属性值的修改的，有点坑。

1.ant-design-vue的InputNumber组件API文档带来的困惑。

ant-design-vue的InputNumber组件官方API文档上写着是支持是支持change事件的，然而实测是不支持的，另外这个InputNumber组件，实际上也能输入中文，英文和特殊字符，并不是如其名所说的那样，只能输入数字。

这是官方文档的链接地址，下方是截图。遇到这种情况，要改变一下自己的传统认知，尽快接受实际情况，继续想别的办法。后来使用Input的change事件，才实现了限制只能输入数字的效果。