当前位置： 移动技术网 > IT编程>网页制作>Html5 > uniapp无痛刷新token

uniapp无痛刷新token

2020年04月27日  | 移动技术网IT编程  | 我要评论

用户登录拿到token，但由于token是有时限的，刷新token的时候需要无声无息，用户还能继续之前的请求。

这里我的想法是，当token到期，返回状态码401，就发起刷新token接口，拿到新的token就把之前的请求再发送一遍，暂时解决问题

此法适用uniapp噢，之前看到其他人的教程，然后按照他的做法，自己亲测之后并记录

  1. 首先，引入封装的request插件：
  2. 按照插件配置服务器网址。
  3. 在index.js中设置请求拦截程序
import http from './interface'
import store from "@/store/index.js"
/**
 * 将业务所有接口统一起来便于维护
 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
 */
module.exports={
    api: {
        userdetail:'/user', //用户详情
        //...    
    },
 request:(url,data,method) => {
     http.config.baseurl = ""
    //设置请求前拦截器
    http.interceptor.request = (config) => {
        let token =uni.getstoragesync("token")
            delete config.header['authorization']
            if(token){
                config.header['authorization']='bearer ' +token 
            }
        }
     
    //设置请求结束后拦截器
    http.interceptor.response =async (response) => {
        const statuscode=response.statuscode
        if(statuscode ===401){ //返回401，即token需刷新
            return    response.data=await dorequest(response,url)
        }
        if (statuscode === 422){
            uni.hideloading()
          　　//业务代码...return
        } 
　　     //不能再刷新时，服务器返回状态码500时
        if(response.statuscode ===500 ){ 
            store.commit("login",undefined)
            uni.removestoragesync("token")
            uni.removestorage({
                key:"password"
            })
            uni.showtoast({
                icon:"none",
                title:"身份信息过期，请重新登陆",
                duration: 1000,
                complete() {
                    uni.relaunch({
                        url:'/pages/login/login'
                    }) 
                }
            })
            return
        }
        if(response.statuscode===200 || response.statuscode===201|| response.statuscode===204){  //成功
            uni.hideloading()
            return response.data
        }else {
            uni.hideloading()
                uni.showtoast({
                    title:response.data.message ,
                    icon:'none',
                    duration: 1000
                })
                return
        }
    }
    return http.request({
        url:url,
        data,
        method:method
    })
    
},
}
   //刷新token并继续之前请求
    async function dorequest(response,url){
            const res=await module.exports.request('/authorizations/current',{},'put')
            if(res && res.access_token){
                let config=response.config
                uni.setstoragesync("token", res.access_token);
                config.header['authorization']='bearer '+res.access_token
                const resold=await module.exports.request(url,{...config.data},config.method)
                    uni.hideloading()
                    return resold
            }

　　　　　　//　else{
           //     console.log("重新登陆");
           //     uni.removestoragesync("token")
           //    store.commit("login",undefined)
           //     uni.removestoragesync("password")
           //     uni.showtoast({
           //         title:"身份信息过期，请重新登陆",
           //        duration: 1000,
           //         success() {
           //             uni.relaunch({
           //                 url:'/pages/login/login'
           //             }) 
           //         }
           //     })
           //    return false
           // }
        }

 

　// 统一的响应日志记录   interface.js中，将401开放出来，500不开放
                _reslog(response)
                if (statuscode === 200 || statuscode === 401 || statuscode === 201 || statuscode === 204) { //成功
                    resolve(response);
                } else {
                    reject(response)
                }

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网