token和refreshToken

为什么会有refreshToken

token是有时效的 假如token时效是2s(实际当然不会这么短这里只是为了理解)则用户会在浏览需要token的界面过程中因为token失效而强制跳转到登陆页 对用户体验非常不友好 所以引入了refreshToken

refreshToken作用

当token失效后refreshToken会重新发送请求获取新的token 这个请求一般会返回新的refreshToken和新的token这时我们就可以将新的token重新覆盖旧来的token

当然refreshToken也是有时效的 有的人认为为什么不直接延长token时效而非要refreshToken来延长token时效 这个本菜鸟目前理解是单一的token如果被打手知道容易安全隐患所以token时效一般不长 希望有大佬指点一下

第一步 配置请求拦截器

任意界面的js文件中

Page({
  onLoad(){ 
   wx.hhtp.get('/root')         //发送请求获取数据
          }
   })
  


utils文件中                      //为了可维护性 创建的文件 方便配置接口基地址，请求+响应拦截器

//请求拦截器  
http.intercept.request = (config) =>{      
const token = getApp().token                                  
if(token){                                    //判断有无token 有则添加请求头

config.header = {                           

Authorization:token,                         //添加请求头
...config.header                             //考虑到可能携带其他信息
 }
}
return config                                       
}

第二步配置 存储token和refresh_token

登陆页面组件中
  getApp().setToken(data.token,  data.refresh_token)   //data.token ：data是 token外面的一层



 这里我配置在全局里 因为比较常用所以需要放在全局方便调用
 
  //存储代码为  之前有在全局声明tonke refresh_token
 setToken( token, refresh_token ) {                       
 
   const temp  = 'Bearer ' + token                    //设置变量来存储 token 和refresh_token
   const refresh_token =  'Bearar ' + refresh_token
   
   this.token = temp                                //赋值给全局公用的 token 和refresh_token
   this.refresh_token = refresh_token
   
   wx.setStorageSync('token' , temp)                   //存储
   wx.setStorageSync('refresh_token' , refresh_token)
   
  }
  

三. 启动小程序时获取tonke 和refresh_token

   tonke :'',
   refresh_token:'', 
 onLaunch(){                                      //小程序一启动就获取本地的token存储到全局
    this.getToken()
    this.getrToken()
    }
getToken(){                                       //函数
     const token = wx.getStorageSync('token')     //从本地获取
     this.token = token                           //存本地
     }                        
getrToken(){
     const efresh_token = wx.getStorageSync('efresh_token')
     this.efresh_token = efresh_token
     }
     +第二部内容
     )}

四 刷新token 和 无感刷新 在响应拦截器配置

http.intercept.response = async (res) =>{       //响应拦截器         请求拦截器：request
    console.log(res)                           //可以方便看数据
   if(ret.statusCode === 401 ){                //token失效
      console.log('token 失效 ')     
      
          // 第五点 refreshToken失效 处理
          
      const res2 =  await http ({         //通过发送refreshToken来获取新的token
        url:'/refreshToken', 
        method:'POST',
        header:{
          Authorization: getApp().refresh_token,
          }，
        )}  
      
   getApp().setToken(res2.data.token , res2.data.refreshToken) //存本地并覆盖旧值   
   
   return http({                                        //当请求有错误时
    ...res.config
    header:{
     Authorization: getApp().token,                    //覆盖token 
     },
    )}
   } 

第五点 refreshToken失效 处理 因为refreshToken也是失效的然后获取不到token 也就是说会一直 进行 逻辑 token失效 需要 refreshToken来获取新的token 的逻辑死循环

  if(res.config.url.endsWith('refreshToken')){             
    const pageStack = getCurrentPages()
    const current = pageStack[pageStack.length - 1]     
    const url = current.route
    
   return wx.redirectTo({                               // 跳转登录页重新登录
     url: '/pages/login/index?backTo=/' + url,
     })
   }