前端常见问题

码匠君 ... 2022-1-2 大约 8 分钟

# 前端常见问题

# [1]客户端身份验证失败

前端工程正常启动后,弹出错误提示“客户端身份验证失败”,如下图所示:

客户端身份验证失败

具体问题的原理,与下面问题的原理一致。想要了解原理,可以看下面问题中的"系统设计逻辑",不关心可以跳过。

问题原因

这个问题原因就是:没有初始化数据库

第一次搭建本系统,还是建议耐心、细致的看文档,相关的内容都有说。

# [2]登录框无法输入用户名和密码

前端工程正常启动后,出现登录框无法输入用户名和密码的情况。通过浏览器控制台查看,控制台中会出现 412 错误,如下所示:

POST http://localhost:8847/dante-cloud-uaa/open/identity/session 412 (Precondition Failed)
1

# 系统设计逻辑

  1. 为了提高系统的安全性,本系统混合 SM2(非对称) 和 SM4(对称加密) 算法,基于自定义注解和数字信封技术,设计接口数据前后端加密传输逻辑。实现 Sm4 KEY 动态生成、前后端数据加密传输、一人一钥的安全机制。

2.7.X 版本之前,默认使用的是 RSA + AES 算法实现,2.7.X 版本之后改为使用 SM2 + SM4,仍旧支持 RSA + AES 可以通过修改配置进行变更

  1. 由于 Vue 的 Session 存在变化的问题,导致使用 Vue Session 无法确认唯一性,因此系统中增加了自定义 Session 机制。本系统的安全机制,就是基于自定义 Session 机制实现。每次使用系统时,根据自定义 Session,后端动态生成秘钥实现数据的加密传输。
  2. 因为,自定义 Session 的创建和秘钥的传输,使用的是开放接口,即无须认证既可以使用的接口。所以为了进一步提升安全性,open/identity/session接口,增加了对客户端的认证逻辑,如果是非法客户端或者客户端未验证通过,open/identity/session的接口是无法返回正确信息,输入用户名和密码也无法正确解密,所以输入框被禁用。

# 出现问题的原因

open/identity/session 接口要验证客户端的合法性,使用的是 clientIdclientSecret 信息,在系统后端进行验证。客户端信息验证失败,通常是以下几方面原因:

  • 后端 IP 地址错误,前端无法正常连接。
  • 数据库中有数据,clientIdclientSecret 信息不匹配。
  • 数据库未正确初始化数据,oauth2_registered_client 表中没有数据,所以 clientIdclientSecret 信息始终是不匹配的。

# 如何解决

  1. 检查前端工程中,.env.development.env.production 文件中配置的后端 IP 地址是否正确。
  2. 初次搭建本项目的过程中,在工程尚未正确运行时,除了在前端修改后端访问 IP 外,不要擅自修改其它已经配置好的参数。
  3. 检查数据库是否正确进行了数据初始化操作(检查数据表里是否有数据,特别是 oauth_client_details)。

提示

大多数情况,要么是没有耐心和认真的看文档,不按照文档操作;要么是在系统还没有运行成功,搭建的过程中,就按照自己的想法和理解进行修改和参数调整,导致运行失败。

# 为什么控制台中看到返回的是412错误

412 错误是源于本项目中的自定义错误体系。为了更快捷更准确的定位错误,本系统自定义错误体系与 Http 协议中的状态进行了有机结合,并尽可能借鉴 Http 状态的含义。

本系统自定义错误体系借鉴了 Http 412 (Precondition Failed) 状态的含义: 未满足前提条件。看到这一类错误,通常代表是因为前序的条件或者参数为准备充足,导致无法正确运行。

# [3](老版本)前端工程编译失败无法启动

编译失败或无法启动问题,主要体现在,在使用命令 yarn e:ui dev 启动前端工程时,会出现较多编译错误,导致前端工程无法启动。常见的错误如下图所示:

常见错误1

常见错误2

# 为什么出现编译错误问题

出现编译问题主要原因是:Vue 工程使用的第三方依赖包越来越多,第三方依赖包升级维护的速度以及自身的兼容性也有较大差异。由于目前使用的是 Vue2 + Typescript + Vuetify2, 所以部分依赖包版本还不能使用最新版本,这些依赖包版本太高就会导致编译错误。

# 编译错误解决办法

Dante Cloud UI 工程,在每次发布时,都会对依赖包版本进行升级测试,如果可以升级,那么在版本发布时就会同步进行升级。

  1. 因此,通常情况下,你所使用的工程代码,其依赖包在允许范围内均已经是最新的,除非有十足把握,否则请不要自己升级依赖包版本。
  2. 本工程默认使用的 yarn 包管理工具,工程中的 yarn.lock 文件就是对工程依赖包版本的锁定文件,不要删除或者修改此文件。

# [4](老版本)Integrity check failed for "graceful-fs" (computed integrity doesn't match our records

# 问题原因

Yarn 在执行 Install 命令的过程中,会同时验证项目中软件包内容的版本和哈希值 package.jsonYarn 锁定文件的值匹配。 这有助于验证软件包依赖关系未被更改。

查阅资料,靠谱的一些文章说明的主要原因是:Node.js 默认源是包含「完整性」(integrity)这一字段的。因为淘宝 npm 源没有提供「完整性」(integrity)这一字段,当你更换为淘宝的源[http://registry.npm.taobao.org]之后,下载包缺失「完整性」信息就会导致校验失败。

可能是文章出来的时间有点早,现在淘宝源已经包含了「完整性」(integrity)校验字段,通过查验 yarn.lock 文件就可以证实。但文章本身还是有一定借鉴作用。

# 解决办法

# 方法一

如果没有在现有前端工程中进行开发,仅是下载后运行。那么可以将工程删除,重新 git clone 前端工程,再次运行即可。或者重新下载代码包,重新解压运行。

# 方法二

如果已经在现有前端工程中进行开发,按照以下步骤尝试解决:

  1. 在工程根目录下,找到 package.json 文件。在该文件的 devDependencies 部分,手动添加依赖 "graceful-fs": "4.2.9", (注意以逗号结尾)
  2. 为了规避不可预知的问题,先清除工程以及开发环境中已有的依赖缓存

// 1. 清除各个包中的 node_modules 文件夹。
lerna clean

// 如果提示lerna命令找不到,请先全局安装 lerna
// yarn global add lerna

// 2. 清除 yarn 环境中已有的缓存
yarn cache clean
1
2
3
4
5
6
7
8
9
  1. 更新工程中,已有 yarn.lock 锁定各个依赖包的签名信息。
yarn --update-checksums
1

提示

上面命令执行完成之后,如果 yarn.lock 文件中,可以搜索到以下类似信息,说明操作成功。

graceful-fs@4.2.9:
  version "4.2.9"
  resolved "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
  integrity "sha1-BBsF30V1Xlh6JJQiebnRExRuHJY= sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ=="
1
2
3
4

补充说明

出现 Integrity check failed for “graceful-fs” 错误,原因就是下载下来的依赖包的签名验证不匹配导致。而 yarn.lock 文件,已经将签名错误的 graceful-fs 包文件锁定, 不管是更新还是运行,都会去校验,所以错误一直无法解决。查看之前版本的 yarn.lock 文件,找到以下内容就是导致错误的原因:

graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
  version "4.2.5"
  resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.5.tgz#bc18864a6c9fc7b303f2e2abdb9155ad178fbe29"
  integrity sha1-vBiGSmyfx7MD8uKr25FVrRePvik=
1
2
3
4

该问题是最近一周才出现,之前一直没有遇到过,猜测是可能是淘宝源最近更新了“graceful-fs”包,不知道是哪方面的原因,导致签名不正确导致。所以解决办法本质就是尝试升级 graceful-fs 版本解决。graceful-fs 版本升级之后,yarn.lock 文件中,锁定信息以及签名就已经更新, 如下所示:

graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
  version "4.2.5"
  resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.5.tgz#bc18864a6c9fc7b303f2e2abdb9155ad178fbe29"
  integrity sha1-vBiGSmyfx7MD8uKr25FVrRePvik=
1
2
3
4

原因已经说清楚了,那么也可以通过其他方式,比如手动更新 package.jsonyarn.lock 文件,确保 graceful-fs 版本不是出错的 4.2.5,应该就可以解决。

上次编辑于: 2022年9月23日 19:16
贡献者: 码匠君