詳解uniapp無痛重新整理token方法
前端在請求介面時,和後端定義好了,如果狀態碼為 401,則表明 token 過期,需要前端請求新的 token
大概流程如下:
1.使用者登入之後,後端會返回兩個 token,分別為accessToken 和refreshToken 儲存到Storage
平時請求資料時,請求頭使用accessToken 來發送介面
2.當返回401 token 過期後,我們通過介面向後端獲取新的 token,請求引數為refreshToken
3.我們拿到新的accessToken 和refreshToken 之後,替換掉之前的Storage 中儲存的 token
4.同時還要將我們報 401 的哪個介面,使用新的accessToken,重新請求一次,拿到資料,實現無痛重新整理 token
5.如果後端返回的新的 token 也無法使用,表明需要重新登入,跳到登入頁(這一步可以靈活使用,我個人用的是一個路由外掛配合使用的: https://ext.dcloud.net.cn/plugin?id=578)
配合uni-app的外掛進行使用和實現:
到uni-app的外掛市場下載封裝的request網路請求,按照文件配置到自己的專案上
地址:https://ext.dcloud.net.cn/plugin?id=159
配置好後修改vmeitime-http 資料夾下的 index.js 檔案
再修改vmeitime-http 資料夾下的 interface.js 檔案,將401狀態暴漏出來
如果看到這裡還是看不明白,那麼請看我的原始碼,請注意我使用了兩個外掛,觀眾們酌情理解,仔細消化,配合到自己的專案中思考...
import http from './interface' import config from './config' // request.js import vue from 'vue' import Router from '@/router' //...其它邏輯程式碼 export const execute = (name,data = {}) => { //設定請求前攔截器 http.interceptor.request = (config) => { let token = uni.getStorageSync('accessToken') delete config.header['x-access-token'] if (token) { config.header['x-access-token'] = token } } //設定請求結束後攔截器 http.interceptor.response = async (response) => { const statusCode = response.statusCode; if (statusCode === 401) { response = await doRequest(response) } if (statusCode === 402) { uni.removeStorageSync('accessToken'); uni.removeStorageSync('refreshToken'); uni.removeStorageSync('realname'); let jump = uni.getStorageSync('jump') if (!jump) { setTimeout(() => { uni.showModal({ title: '提示',content: '您的賬號在其它地點登入!',showCancel: false,success: function(res) { if (rYfNOPEiues.confirm) { Router.push({ name: 'login',params: { www.cppcns.com 'RouterName': 'home' } }) } },}) }); uni.setStorageSync('jump','true') } } if (statusCode == 403) { let jump = uni.getStorageSync程式設計客棧('jump') if (!jump) { setTimeout(() => { Router.replace({ name: 'login',YfNOPEiu params: { 'RouterName': 'home' } }) },500) uni.setStorageSync('jump','true') } } // 統一處理錯誤請求 const code = response.data.code; const message = response.data.message; if (response.statusCode == 200 && code !== 0 && code != -1 && code) { uni.showToast({ title: message,icon: "none",duration: 2000 }); } return response; } return hwww.cppcns.comttp.request({ name: name,baseUrl: config.base,url: config.interface[name].path,method: config.interface[name].method ? config.interface[name].method : 'GET',dataType: 'json',data,}) } export default { execute } // 重新整理 token 方法 async function doRequest(response) { const res = await execute('refresh',{refreshToken: uni.getStorageSync('refreshToken')}) const { code,data } = res.data if (code == 0) { uni.setStorageSync('accessToken',data.accessToken) uni.setStorageSync('refreshToken',data.refreshToken) let config = response.config config.header['x-access-token'] = data.accessToken const resold = await execute(config.name,{ ...config.data }) return resold } else { uni.removeStorageSync('accessToken'); uni.removeStorageSync('refreshToken'); uni.showToast({ title: '登陸過期請重新登陸!',success() { Router.push({ name: 'login',params: { 'RouterName': 'home' } }) } }); } }
以上就是詳解uniapp無痛重新整理token方法的詳細內容,更多關於uni-app無痛重新整理token方法的資料請關注我們其它相關文章!