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=https://www.cnblogs.com/Lucyy/p/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)
　　　　　　　　　　}

標籤：HTML5

上一篇：入門云開發

下一篇：PWA入門 -- H5時代原生APP