与 keycloak 集成并在遇到错误时做出反应

Question

我按照以下链接的教程进行操作，

https://blog.logrocket.com/implement-keycloak-authentication-react/

并开发了与 keycloak 服务器集成的 react 应用程序。

但是当我使用 npm start 运行 react 应用程序时，它会在控制台上显示以下错误，

./node_modules/@react-keycloak/core/lib/context.js 模块中的警告 警告（来自 ./node_modules/source-map-loader/dist/cjs.js）：未能 解析源映射 'D:\learn\keycloakreact\reactkc\node_modules@react-keycloak\core\lib@react-keycloak\core\context.ts' 文件：错误：ENOENT：没有这样的文件或目录，打开 'D:\learn\keycloakreact\reactkc\node_modules@react-keycloak\core\lib@react-keycloak\core\context.ts'

./node_modules/@react-keycloak/core/lib/index.js 模块中的警告 警告（来自 ./node_modules/source-map-loader/dist/cjs.js）：未能 解析源映射 'D:\learn\keycloakreact\reactkc\node_modules@react-keycloak\core\lib@react-keycloak\core\index.ts' 文件：错误：ENOENT：没有这样的文件或目录，打开 'D:\learn\keycloakreact\reactkc\node_modules@react-keycloak\core\lib@react-keycloak\core\index.ts'

...还有更多这样的错误和这个奇怪的路径 (D:\learn\keycloakreact\reactkc\node_modules@react-keycloak\core\lib@react-keycloak\core\context.ts) 在我的开车。

当我在 http://localhost:3000 打开页面时，页面会通过以下 url 反复自动刷新并且不会停止。浏览器上的 url 如下所示，

http://localhost:3000/#state=15a4ae98-7357-4877-8c49-90cbd944e3b1&session_state=05b3d7e2-76e0-42d5-94ef-9ae7d658df8f&code=7eaaf97e-4813-4ceb-8d38-5a9babe3f5df8.042-d-d3 94ef-9ae7d658df8f.3b9bb609-5578-4c03-bb7c-fa15fd59fc16

在开发者控制台窗口中，我看到下面的文字出现了几个错误，

指示是否在跨站请求中通过以下方式发送cookie 指定其 SameSite 属性。附上相同的屏幕截图。

我使用的是节点版本 v14.20.0

Keycloak 服务器版本 18.0.2

以下是我的 react keycloak 项目的 package.json 文件的依赖项部分。

"dependencies": {
    "@react-keycloak/web": "^3.4.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "keycloak-js": "^18.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

对此的任何帮助深表感谢。

Answer 1

你解决了这个问题吗？你是怎么决定的，你能告诉我吗？谢谢。