SvelteKit 1.0与keycloak-js集成认证问题排查及解决

场景背景 #

本地搭建了Keycloak服务器，通过Postman可手动获取JWT Token，需要在SvelteKit项目中集成Keycloak认证功能。参考Svelte相关教程修改代码后，部分功能可用，但遇到两个问题，最终已解决，记录如下：

问题1：document is not defined 错误 #

• 现象：登录路由页面的代码能正常跳转到Keycloak登录界面，但输入正确凭据完成登录后，keycloak.js文件抛出document is not defined错误。
• 解决办法：将Keycloak相关的初始化代码包裹到SvelteKit的onMount()钩子中。因为onMount()仅在浏览器端执行，避开了服务端渲染阶段无法访问document对象的问题，错误随即消失。

问题2：401未授权错误 #

• 现象：解决上述错误后，控制台出现401未授权报错。
• 解决办法：在Keycloak控制台找到对应客户端，关闭客户端认证选项（具体为将客户端的Access Type设置为public，或直接关闭Client Authentication开关）。默认开启客户端认证时，前端需携带客户端密钥，但SvelteKit作为前端项目无法安全存储该密钥，关闭选项后即可正常完成认证流程。

内容的提问来源于stack exchange，提问作者askwer