Javascript 每次刷新页面时，避免keydape回调过程

在我的react应用程序中，我使用了key斗篷作为身份提供者。我已经使用npm在我的react应用程序中安装了KeyClope react依赖项

以下是版本为的从属KeyClope react npm模块：

“@react-Keyclope/web”：“2.1.4”，
“密钥斗篷js”：“^11.0.2”

我已经提供了KeyClope配置，如下所示：

const keycloak = new Keycloak({
  realm: "temp-local",
  url: " http://localhost:8090/auth/",
  clientId: "temp-local-client"
});

每次我刷新页面时，它都会使用查询参数state、session\u state和code再次刷新（使用回调url）

例如： 当我转到页面时：http://localhost:8080/test 它将去那里，但它会再次刷新以下网址的网页

示例url:http://localhost:8080/test#状态=45ert45-edac92ddbf2a和会话状态=45ga97bbfb4-f080cvb65e59b和代码=1a1a-4e6e-3fg578-4fg10b-bbafg8-652fg6c44727a4

---

如何避免钥匙斗篷刷新？有人对此有什么想法吗？

也有同样的问题，对我来说，我是这样解决的：

在主要组成部分：

const App = () => {
    //here i'm using redux, btw i'm initializing this auth component
    useEffect(() => auth.init(store.dispatch), [])

import Keycloak from 'keycloak-js';
const keycloak = Keycloak('/keycloak.json');
import axios from 'axios'
import { LocalStore } from '../utils/local_store.js'

const store_token = (token) => {
    axios.defaults.headers.Authorization = `Bearer ${token}`;
    LocalStore.set('token', token);
}

const auth = {
    init(dispatch) {


        keycloak.init({ onLoad: 'login-required', checkLoginIframe: false, }).then(() => {
            store_token(keycloak.token)
            dispatch(authenticateResponse(keycloak.token)).then(
                () => {
                   //auth logic
                }
            );

            //this is my fix
            setInterval(() => {
                keycloak.updateToken(70).then((refreshed) => {
                    if (refreshed) {
                        store_token(keycloak.token)
                        console.debug('Token refreshed');
                    } else {
                        console.warn('Token not refreshed');
                    }
                }).catch(() => {
                    console.error('Failed to refresh token');
                });
            }, 50000)

        }).catch(() => {
            console.error('Auth failed');
        });
    },
    keycloak() {
        return keycloak;
    }
}


export default auth;

身份验证组件：

const App = () => {
    //here i'm using redux, btw i'm initializing this auth component
    useEffect(() => auth.init(store.dispatch), [])

import Keycloak from 'keycloak-js';
const keycloak = Keycloak('/keycloak.json');
import axios from 'axios'
import { LocalStore } from '../utils/local_store.js'

const store_token = (token) => {
    axios.defaults.headers.Authorization = `Bearer ${token}`;
    LocalStore.set('token', token);
}

const auth = {
    init(dispatch) {


        keycloak.init({ onLoad: 'login-required', checkLoginIframe: false, }).then(() => {
            store_token(keycloak.token)
            dispatch(authenticateResponse(keycloak.token)).then(
                () => {
                   //auth logic
                }
            );

            //this is my fix
            setInterval(() => {
                keycloak.updateToken(70).then((refreshed) => {
                    if (refreshed) {
                        store_token(keycloak.token)
                        console.debug('Token refreshed');
                    } else {
                        console.warn('Token not refreshed');
                    }
                }).catch(() => {
                    console.error('Failed to refresh token');
                });
            }, 50000)

        }).catch(() => {
            console.error('Auth failed');
        });
    },
    keycloak() {
        return keycloak;
    }
}


export default auth;

---

有同样的问题，对我来说，我是这样修复的：

在主要组成部分：

const App = () => {
    //here i'm using redux, btw i'm initializing this auth component
    useEffect(() => auth.init(store.dispatch), [])

import Keycloak from 'keycloak-js';
const keycloak = Keycloak('/keycloak.json');
import axios from 'axios'
import { LocalStore } from '../utils/local_store.js'

const store_token = (token) => {
    axios.defaults.headers.Authorization = `Bearer ${token}`;
    LocalStore.set('token', token);
}

const auth = {
    init(dispatch) {


        keycloak.init({ onLoad: 'login-required', checkLoginIframe: false, }).then(() => {
            store_token(keycloak.token)
            dispatch(authenticateResponse(keycloak.token)).then(
                () => {
                   //auth logic
                }
            );

            //this is my fix
            setInterval(() => {
                keycloak.updateToken(70).then((refreshed) => {
                    if (refreshed) {
                        store_token(keycloak.token)
                        console.debug('Token refreshed');
                    } else {
                        console.warn('Token not refreshed');
                    }
                }).catch(() => {
                    console.error('Failed to refresh token');
                });
            }, 50000)

        }).catch(() => {
            console.error('Auth failed');
        });
    },
    keycloak() {
        return keycloak;
    }
}


export default auth;

身份验证组件：

const App = () => {
    //here i'm using redux, btw i'm initializing this auth component
    useEffect(() => auth.init(store.dispatch), [])

import Keycloak from 'keycloak-js';
const keycloak = Keycloak('/keycloak.json');
import axios from 'axios'
import { LocalStore } from '../utils/local_store.js'

const store_token = (token) => {
    axios.defaults.headers.Authorization = `Bearer ${token}`;
    LocalStore.set('token', token);
}

const auth = {
    init(dispatch) {


        keycloak.init({ onLoad: 'login-required', checkLoginIframe: false, }).then(() => {
            store_token(keycloak.token)
            dispatch(authenticateResponse(keycloak.token)).then(
                () => {
                   //auth logic
                }
            );

            //this is my fix
            setInterval(() => {
                keycloak.updateToken(70).then((refreshed) => {
                    if (refreshed) {
                        store_token(keycloak.token)
                        console.debug('Token refreshed');
                    } else {
                        console.warn('Token not refreshed');
                    }
                }).catch(() => {
                    console.error('Failed to refresh token');
                });
            }, 50000)

        }).catch(() => {
            console.error('Auth failed');
        });
    },
    keycloak() {
        return keycloak;
    }
}


export default auth;

---

检查代码的其他部分是否在react路由器中执行重定向：

---

我也有同样的问题，但在一个大型代码库中，其他错误（由于缺少令牌）导致登录路由的内部重定向

检查代码的其他部分是否在react路由器中执行重定向：

---

我也遇到了同样的问题，但在一个大型代码库中，其他错误（由于缺少令牌）导致登录路由的内部重定向

我会尝试一下，但是什么是LocalStore和../utils/local_store.js flie？是localStorage吗？LocalStore只是一个包装lockr的工具，如果你想在local store中存储令牌，你可以使用local store的lockr。我已经尝试了你建议的解决方案，但对我来说它是无限循环的（一次又一次刷新）。我会尝试一下，但是LocalStore和../utils/local_store.js flie是什么？是localStorage吗？LocalStore只是一个包装lockr的工具，如果你想在local store中存储令牌，你可以使用local store的lockr。我尝试了你建议的解决方案，但对我来说，它是无限循环的（它一次又一次地刷新）。