token的刷新

ゝ一纸荒年。 2023-01-18 13:25 21阅读 0赞

一般情况下状态码为 401 ,则表明 token 过期,需要前端请求新的 token

*  第一种：跳回登陆页面重新登陆

instance.interceptors.response.use(
      function (response) { 
        // 对响应数据做点什么
        return response.data
      },
      function (error) { 
        console.log(error)
    
        if (error.response) { 
          if (error.response.status === 401) { 
                Message.error('登陆过期请重新登陆！')
                setToken('')
                router.push({ 
                  name: 'login'
                })
            }
          }
        }
    
        // 对响应错误做点什么
        return Promise.reject(error.response)
      }
    )

*  第二种：拿着过期的token去换取新的token  
    ![在这里插入图片描述][20210506170350338.png]  
    1.用户登录之后,后端会返回两个 token ,分别为 accessToken 和 refreshToken 存储到 Storage

平时请求数据时,请求头使用 accessToken 来发送接口

2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为 refreshToken

3.我们拿到新的 accessToken 和 refreshToken 之后, 替换掉之前的 Storage 中存储的 token

4.同时还要将我们报 401 的哪个接口 ,使用新的 accessToken ,重新请求一次, 拿到数据,实现无痛刷新 token

instance.interceptors.response.use(
      function (response) { 
        // 对响应数据做点什么
        return response.data
      },
      function (error) { 
        console.log(error)
    
        if (error.response) { 
          if (error.response.status === 401) { 
           
            // 如果当前路由不是login，并且用户有 “记住密码” 的操作
            // 那么去请求新 token
            if (router.currentRoute.name !== 'login') { 
              if (getRemember() && getRefreshToken()) { 
    
                return doRequest(error)
              } else { 
    
                Message.error('登陆过期请重新登陆！')
                setToken('')
                router.push({ 
                  name: 'login'
                })
              }
            }
          }
        }
    
        // 对响应错误做点什么
        return Promise.reject(error.response)
      }
    )

async function doRequest (error) { 
      const data = await store.dispatch('refreshToken')
    
      return res
    }
    
    // refreshToken 中重新设置了 token 和 refresh_token
    commit('setToken', {  token, expiresIn })
    setRefreshToken(token, refreshTtl / (60 * 60 * 24))

[20210506170350338.png]: /images/20221021/bad077260591456cbe97b282ad4aa60a.png