尝试使用 keycloak 服务器保护前端反应页面，但出现此错误“keycloak.init(...).then is not a function”

Question

我正在尝试使用 keycloak 保护反应组件，到目前为止我已经按照它所说的做了所有事情：

• 我已经通过 NPM 安装了软件包 KEYcloak
• 我已将 keycloak.json 放在公共文件夹中
• 我已经修改了我的组件，因此它会在页面被路由时挂载

但最后我得到这个错误：

keycloak.init(...).then 不是函数

我试图用 check-sso 替换 login-required

这是我在组件中注入的代码：

import Keycloak from 'keycloak-js';

componentDidMount() {
        const keycloak = Keycloak('./public/keycloak.json');
        keycloak.init({onLoad: 'login-required'}).then(authenticated => {
          this.setState({ keycloak: keycloak, authenticated: authenticated })
        })
    }

render(){
    if (this.state.keycloak) {
        if (this.state.authenticated)
            return (<div className="container text-dark">);
        else return (<div>Unable to authenticate!</div>)
    }
    return (<div>Initializing Keycloak...</div>);
}

Answer 1

代替 ：

const keycloak = Keycloak('./public/keycloak.json');

尝试这个：

const keycloak = Keycloak('/keycloak.json');

并在这样的初始化选项中将promiseType设置为native（在您的情况下）：

keycloak.init({onLoad: 'login-required', promiseType: 'native'}).then(authenticated => { this.setState({ keycloak: keycloak, authenticated: authenticated }) })