zoukankan      html  css  js  c++  java
  • uniapp无痛刷新token

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

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

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

    1. 首先,引入封装的request插件:https://ext.dcloud.net.cn/plugin?id=159
    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时,判断是不是刷新token的接口
    if(response.statusCode ===500 ){

            if(response.config.url.indexOf("current") == -1){
                uni.showToast({
                  icon:"none",
                  title:"网络错误"
                })
            }

            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{         //这个时候状态码是 500 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|| statusCode === 500 ) { //成功  
                resolve(response);
              }
    else {
                reject(response)
              }
  • 相关阅读:
    文件上传的核心点 一(59)
    ajax1—php(27)
    php—Smarty-缓存2(26)
    php—Smarty-缓存1(25)
    java—实现一个监听器HttpServletRequest的创建销毁、在线人数 (56)
    Linux—virtualbox系统安装(1)
    php—Smarty-2
    java—不同的用户登录以后可以看到不同的菜单(后台可以实现对用户菜单的管理) 1 (55)
    java—数据存储过程 (54)
    java—ThreadLocal模式与OSIV模式(53)
  • 原文地址:https://www.cnblogs.com/Lucyy/p/12744550.html
Copyright © 2011-2022 走看看