我试图有登录页面与使用Reacttypescript,我正在使用状态管理与Mobx,也使刷新令牌方法如下,我的问题是令牌到期前,刷新令牌无法触发令牌时间结束。我的登录方法是在userstore.tsx像:
login = async (creds: UserFormValues) => {
try {
const user = await agent.Account.login(creds);
store.commonStore.setToken(user.token);
this.startRefreshTokenTimer(user);
runInAction(() => this.user = user);
window.location.href = '/dashboard'
} catch (error) {
throw error;
}
}
登录方法在刷新令牌计时器工作并运行refreshtoken方法后立即工作,如下所示;
refreshToken = async () => {
this.stopRefreshTokenTimer();
try {
const user = await agent.Account.refreshToken();
runInAction(() => this.user = user);
store.commonStore.setToken(user.token);
this.startRefreshTokenTimer(user);
} catch (error) {
console.log(error);
}
}
private startRefreshTokenTimer(user: User) {
const jwtToken = JSON.parse(atob(user.token.split('.')[1]));
const expires = new Date(jwtToken.exp * 1000);
const timeout = expires.getTime() - Date.now();
alert(expires.getTime() - Date.now())
this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
}
private stopRefreshTokenTimer() {
clearTimeout(this.refreshTokenTimeout);
}
时间到后,我在等待,刷新令牌方法被触发,但它不可能后,我给甚至1分钟短令牌到期时间,并等待1分钟触发自己。我的根组件App.tsx也如下所示;
import 'devextreme/dist/css/dx.softblue.css';
import { observer } from 'mobx-react-lite';
import { Suspense } from 'react'
import { Outlet } from 'react-router-dom'
import { I18nProvider } from '../_metronic/i18n/i18nProvider'
import { LayoutProvider, LayoutSplashScreen } from '../_metronic/layout/core'
import { MasterInit } from '../_metronic/layout/MasterInit'
const App = observer(() => {
return (
<Suspense fallback={<LayoutSplashScreen />}>
<I18nProvider>
<LayoutProvider>
<Outlet />
<MasterInit />
</LayoutProvider>
</I18nProvider>
</Suspense>
)
})
export { App }
我想我跳过了一些我必须做的事情,如果有人帮助,并希望我更清楚和额外的细节,我可以给予更多的信息,我陷入了这个问题。
1条答案
按热度按时间rsaldnfx1#
这个问题与mobx无关。我在上面的第一个代码中解决了这个问题,我意识到我在这里使用了
window.location.href = '/dashboard'
,当组件改变时,javascript重新加载。防止问题的原因是它应该使用history.push('/dashboard')
。我使用历史版本6,这个版本与早期版本有点不同,要查看这个用法,请单击这里的link。我注意到这一点,因为这可能是有帮助的背景,如果任何人得到这种问题