V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lsy99
V2EX  ›  问与答

求助大佬,浏览器怎么实现定时执行

  •  
  •   lsy99 · 2022-12-28 18:39:42 +08:00 · 1331 次点击
    这是一个创建于 688 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求是登录之后会有一个 token 过期时间,时间不固定最长会有一个月,到了时间立刻弹框重定向到登录页,不能等到请求接口返回 403 再弹框,这个应该怎么实现呢?

    13 条回复    2022-12-29 18:05:25 +08:00
    liyang5945
        1
    liyang5945  
       2022-12-28 18:44:16 +08:00
    token 和过期时间都存到 localstorage 里,js 写个定时器不断对比当前时间和过期时间,时间到了就跳转
    lsy99
        2
    lsy99  
    OP
       2022-12-28 19:04:59 +08:00
    @liyang5945 这个提过了 PR 被拒了,被说会有性能问题,这个真的会很占用性能吗? setinterval 还不能太长要不然测试不过
    MossFox
        3
    MossFox  
       2022-12-28 19:16:53 +08:00
    需求描述总觉得有点怪,但懒得管了。如果没办法用事件触发的话,在已知 Token 过期时间的前提条件下,看这个 👇


    过期时间小于这个值,直接放一个定时器 (是 setTimeout) 伺候。超过就拆成多个叠起来:
    setTimeout(() => setTimeout(() => { /* do something...*/ }, a), b);
    a + b = 过期时间
    liyang5945
        4
    liyang5945  
       2022-12-28 19:38:56 +08:00
    @lsy99 #2 用 webwoker 另开一个线程做这个事
    oneisall8955
        5
    oneisall8955  
       2022-12-28 19:52:05 +08:00 via Android
    如果没有 refresh token 机制,到期了接口 403 到登录页,和你的主动到检测到期登录页一样的效果,一个前一点一个后一点而已,有啥区别?
    xg4
        6
    xg4  
       2022-12-28 19:54:30 +08:00
    ```ts
    interface Token {
    value: string
    expires: string
    }

    function onClear() {
    // TODO: clear
    }

    function setToken(token: string) {
    localStorage.setItem(
    'token',
    JSON.stringify({
    value: token,
    expires: new Date('2023/1/2 10:00:00').toISOString(),
    })
    )
    }

    function checkToken() {
    const tokenJson = localStorage.getItem('token')
    if (tokenJson) {
    const token: Token = JSON.parse(tokenJson)
    const diff = Date.now() - new Date(token.expires).getTime()
    if (diff >= 0) {
    onClear()
    return
    }
    setTimeout(onClear, diff)
    }
    }

    checkToken()
    ```
    ChefIsAwesome
        7
    ChefIsAwesome  
       2022-12-28 20:01:02 +08:00
    这种东西哪有在前端做的。在前端做,随随便便就绕过去了,有何意义?
    lsy99
        8
    lsy99  
    OP
       2022-12-28 20:01:43 +08:00
    @MossFox 感谢,我试试
    lsy99
        9
    lsy99  
    OP
       2022-12-28 20:05:17 +08:00
    @oneisall8955
    @ChefIsAwesome
    是产品的需求,我们这里开发没有权力推掉这种需求😶
    ysc3839
        10
    ysc3839  
       2022-12-28 20:12:08 +08:00 via Android
    @lsy99 发一下具体的拒绝理由?你设置 10 秒或 30 秒检查一下也不会有什么性能问题吧?
    weiwoxinyou
        11
    weiwoxinyou  
       2022-12-29 09:03:41 +08:00 via Android
    微信读书 web 端做法是隔几分钟请求一下
    magnetar
        12
    magnetar  
       2022-12-29 10:56:57 +08:00
    额,发起请求前检查过期时间就行了吧
    z1829909
        13
    z1829909  
       2022-12-29 18:05:25 +08:00
    页面初始化的时候, 获取一下 token 的剩余时间, 然后 setTimeout
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2540 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:30 · PVG 09:30 · LAX 17:30 · JFK 20:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.