如何使用刷新令牌刷新访问令牌？

Question

当访问令牌过期并想用令牌刷新它时出现问题。我有两种方法，一种显示帐户并使用 axios post，另一种刷新令牌。

export const add_account = account=>{

    var token=localStorage.getItem("access_token")

      var decoded=jwt_decode(token);

        var time_exp=decoded.exp;

        if(time_exp<new Date().getTime()/1000) {

            refreshToken();

        }

    return axios.post("http://localhost:5000/accounts",{

        acc_name:account.name,

        acc_pass:account.pass,

        acc_host:account.host,

        acc_description:account.description

   }, {headers: {

    'Authorization': `Bearer ${localStorage.getItem('access_token')}`

        }}).then(res=>{

        return res.data

    })

}

第二种方法是刷新方法，我注意到在调试中首先进入刷新令牌函数，当进入该函数时转到.then(res=> .... 然后返回第一个函数进程返回 axios.post 并查看该 access_token 已过期。之后返回 refreshToken() 并设置本地存储 access_token。

export const refreshToken=()=>{

return axios.post("http://localhost:5000/refresh",null,{headers: {

'Authorization': `Bearer ${localStorage.getItem("refresh_token")}`

    }}).then(res=>{

        localStorage.setItem('access_token',res.data['access_token']);

        return res.data;

}).catch(e=>{

    console.log(e)

})

Answer 1

在我看来，refreshToken 函数与您的 login 函数并行运行，因为您不必等到 refreshToken 函数完成。您可以尝试将第一个更改为异步函数并等待结果。export const add_account = async account=>{&nbsp; &nbsp; var token=localStorage.getItem("access_token")&nbsp; &nbsp; &nbsp; var decoded=jwt_decode(token);&nbsp; &nbsp; &nbsp; &nbsp; var time_exp=decoded.exp;&nbsp; &nbsp; &nbsp; &nbsp; if(time_exp<new Date().getTime()/1000) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;await refreshToken();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; return axios.post("http://localhost:5000/accounts",{&nbsp; &nbsp; &nbsp; &nbsp; acc_name:account.name,&nbsp; &nbsp; &nbsp; &nbsp; acc_pass:account.pass,&nbsp; &nbsp; &nbsp; &nbsp; acc_host:account.host,&nbsp; &nbsp; &nbsp; &nbsp; acc_description:account.description&nbsp; &nbsp;}, {headers: {&nbsp; &nbsp; 'Authorization': `Bearer ${localStorage.getItem('access_token')}`&nbsp; &nbsp; &nbsp; &nbsp; }}).then(res=>{&nbsp; &nbsp; &nbsp; &nbsp; return res.data&nbsp; &nbsp; })}也许在风格上也使用 then 语法而不是 async await 会更有意义，但是您必须指定两条执行路径（一条带有 refreshToken，一条不带），这看起来很复杂。