reactjs 刷新令牌方法无法通过在与metronic模板React中使用mobx触发

px9o7tmv  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(105)

我试图有登录页面与使用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 }

我想我跳过了一些我必须做的事情,如果有人帮助,并希望我更清楚和额外的细节,我可以给予更多的信息,我陷入了这个问题。

rsaldnfx

rsaldnfx1#

这个问题与mobx无关。我在上面的第一个代码中解决了这个问题,我意识到我在这里使用了window.location.href = '/dashboard',当组件改变时,javascript重新加载。防止问题的原因是它应该使用history.push('/dashboard')。我使用历史版本6,这个版本与早期版本有点不同,要查看这个用法,请单击这里的link
我注意到这一点,因为这可能是有帮助的背景,如果任何人得到这种问题

相关问题