vue中Axios如何添加拦截器刷新token

vue中Axios如何添加拦截器刷新token

这篇文章将为大家详细讲解有关vue中Axios如何添加拦截器刷新token,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

Axios是一款网络前端请求框架,基本用法如下:

vue中Axios如何添加拦截器刷新token

1. Axios基本用法:

constresponse=awaitAxios.create({baseURL:"https://test.api.com",headers:{'Content-Type':'application/json',},}).post<RequestResponse>('/signin',{user_id:"test_user",password:"xxx",});

其中,RequestResponse是返回的数据要解析为的数据类型,如下:

exportinterfaceRequestResponse{data:any;message:string;resultCode:number;}

这样,得到的response就是网络请求的结果,可以进行判断处理。

2. Axios基本封装用法:

对Axios进行简单的封装,使得多个网络请求可以使用统一的header等配置。

新建一个工具类,进行封装:

importAxios,{AxiosRequestConfig,AxiosError,AxiosInstance,AxiosResponse}from'axios';exportconstBASE_URL="https://test.api.com";exportconstaxiosApi=():AxiosInstance=>{constinstance=Axios.create({baseURL:BASE_URL,headers:{'Content-Type':'application/json',Authorization:`${getAccessToken()}`,},});returninstance;}constgetAccessToken=()=>{//这里获取本地保存的tokenreturnxxxxx}

然后使用的地方是这样:

constresponse=awaitaxiosApi().post<RequestResponse>('/signin',{user_id:"test_user",password:"xxx",});

3. 添加拦截器的用法

现在我们想再增加个功能,就是调接口时,header里传了token,但是有时候token过期了接口就会返回失败,我们想在封装的地方添加统一处理,如果token过期就刷新token,然后再调接口。

其中token的数据格式及解析方法已知如下:

import*ascryptofrom'crypto';import*asjwtfrom"jsonwebtoken";exportinterfaceTokenData{userid:string;exp:number;iat:number;}exportconstdecodeJWT=function(token:string):TokenData{if(!token){returnnull;}constdecoded=jwt.decode(token,{complete:true});returndecoded?.payload;};

如何统一刷新token呢?可以添加拦截器进行处理。把对Axios的封装再改下,添加拦截器:

exportconstaxiosApi=():AxiosInstance=>{constinstance=Axios.create({baseURL:BASE_URL,headers:{'Content-Type':'application/json',Authorization:`${getAccessToken()}`,},});//添加拦截器instance.interceptors.request.use(config=>{returnrefreshToken(config);},err=>{returnPromise.reject(err)})returninstance;}//刷新token的方法constrefreshToken=async(config:AxiosRequestConfig)=>{constoldToken=getAccessToken();if(!oldToken){//如果本地没有token,也就是没登录,那就不用刷新tokenreturnconfig;}consttokenData=decodeJWT(oldToken);//解析token,得到token里包含的过期时间信息constcurrentTimeSeconds=newDate().getTime()/1000;if(tokenData&&tokenData.exp>currentTimeSeconds){returnconfig;//token数据里的时间比当前时间大,也就是没到过期时间,那也不用刷新}//下面是刷新token的逻辑,这里是调API获取新的tokenconstresponse=awaitsignInRefreshToken(tokenData?.userid);if(response&&response.status==200){const{token,refresh_token}=response.data?.data;//保存刷新后的tokenstoreAccessToken(token);//给API的header设置新的tokenconfig.headers.Authorization=token;}returnconfig;}

经过这样添加了拦截器,如果token没过期,就直接进行网络请求;如果token过期了,那就会调接口刷新token,然后给header设置新的token再进行网络请求。

4. 注意事项:

要注意的一点是,实际应用时,要注意:

1.刷新token时如果调接口,所使用的网络请求工具不能也使用这个封装的工具,否则就会陷入无限循环,可以使用简单未封装的方式请求。

2.本例使用的方法,是进行请求前刷新token。也可以使用先调网络请求,如果接口返回错误码表示token过期,则刷新token,再重新请求的方式。

关于“vue中Axios如何添加拦截器刷新token”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

发布于 2022-02-15 20:42:04
收藏
分享
海报
0 条评论
28
上一篇:Java在重载中如何使用Object 下一篇:C语言如何读取文件求某一列的平均值
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码