Javascript KeyClope对象属性“;“认证”;应为true时返回false
所以,我正在开发一个react redux应用程序,它需要一些用户进行身份验证,我使用KeyClope进行验证 基本上,在:Javascript KeyClope对象属性“;“认证”;应为true时返回false,javascript,reactjs,redux,react-redux,keycloak,Javascript,Reactjs,Redux,React Redux,Keycloak,所以,我正在开发一个react redux应用程序,它需要一些用户进行身份验证,我使用KeyClope进行验证 基本上,在: -本地主机:3000/ 现在,当用户单击一个链接进入欢迎页面时,keydapore登录页面应该弹出并询问身份验证详细信息,我已经设法做到了: -localhost:3000/欢迎->localhost:8080/auth 如上所述,登录页面已经显示并正确验证注册用户。但是,一旦成功登录,我将被重定向到localhost:3000/welcome(这很好),但没有任何内容(
-本地主机:3000/ 现在,当用户单击一个链接进入欢迎页面时,keydapore登录页面应该弹出并询问身份验证详细信息,我已经设法做到了:
-localhost:3000/欢迎->localhost:8080/auth 如上所述,登录页面已经显示并正确验证注册用户。但是,一旦成功登录,我将被重定向到localhost:3000/welcome(这很好),但没有任何内容(这不好) 因此,我继续将keydepeat.authenticated的状态记录到控制台。在调用“keydove.init”之前,它是未定义的(这很好),在成功验证后,它是false的(:o?!) 奇怪 因此,似乎我必须手动更改keydepeat.authenticated的状态 2个问题: -面对没有构造函数等的reduxish无状态组件,我如何更改keydepeat.authenticated。 -我的问题对吗? 一些手续: keydape.js 欢迎页面包装的高阶组件的代码:
从“React”导入React;
const{Consumer,Provider}=React.createContext();
export const keydeposeprovider=提供程序;
const WITHKEYDOPE=组件=>
钥匙斗篷功能(道具){
return React.createElement(Consumer,null,keyClope=>{
console.log('before:',keydeport.authenticated);->未定义
if(keydepeat.authenticated){
返回React.createElement(组件,{…props,keydepot},null);
}
console.log('before init:',keydeport.authenticated);//->未定义
init({onLoad:'login required'});
console.log('after:',keydeport.authenticated);//->false!!
返回null;
});
};
导出默认的keyClope;
main.jsx
定义keydepeat的main.jsx代码:
/**@格式*/
进口很多东西。。。。;
从“./keydove/provider”导入{keydoveprovider};
从“keydove js”导入keydove;
常量存储=。。。
const keydove=keydove({
网址:'http://localhost:8080/auth',
领域:“测试Jannis”,
clientId:“测试bayron”
});
常量Main=()=>(
);
导出默认主;
我最好的猜测是在keydove.js中的keydove.init下执行以下操作:
keydape.init({onLoad:'login required'});
。然后(authenticated=>(keydepeat.authenticated=authenticated));
但是…这并不能改变keydepeat.authenticated是假的
请帮忙:)
更新
为keydepeat.js使用以下代码:
constwithkeydape=component=>
钥匙斗篷功能(道具){
return React.createElement(Consumer,null,keyClope=>{
log('before:',keydeport.authenticated);
init({onLoad:'login required'})。成功(函数(){
如果(keydepeat.authenticated){
log(“返回页:”,keydeport.authenticated);
控制台日志(组件);
log(React.createElement(组件,{…props,keydape},null));
返回React.createElement(组件,{…props,keydepot},null);
}
log(“返回null:”,keydeport.authenticated);
返回null;
});
});
};
现在输出keydape.authenticated===true!
但是,重定向的localhost:3000/welcome仍然不显示欢迎组件应该显示的任何html 以下密钥斗篷:
默认情况下,JavaScript适配器创建一个隐藏的iframe,用于检测是否发生了单次注销。这不需要任何网络流量,而是通过查看特殊的状态cookie来检索状态。通过在传递给init方法的选项中设置checkLoginFrame:false,可以禁用此功能
您需要将密钥斗篷初始化代码设置为:
keydape.init({checkLoginIframe:false}).success((已验证)=>{
//一些东西
})
如果您找到了解决方案,您能否回答以下问题?如果您没有将令牌存储在localstorage中,您如何处理刷新浏览器