詳解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 (res.confirm) { Router.push({ name: 'login', params: { 'RouterName': 'home' } }) } }, }) }); uni.setStorageSync('jump', 'true') } } if (statusCode == 403) { let jump = uni.getStorageSync('jump') if (!jump) { setTimeout(() => { Router.replace({ name: 'login', 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 http.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: '登陸過期請重新登陸!', icon: "none", success() { Router.push({ name: 'login', params: { 'RouterName': 'home' } }) } }); } }
以上就是詳解uniapp無痛刷新token方法的詳細內容,更多關於uni-app無痛刷新token方法的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Vue3+Vite使用雙token實現無感刷新
- 如何實現無感刷新token
- vue中Axios添加攔截器刷新token的實現方法
- ASP.NET Core應用JWT進行用戶認證及Token的刷新方案
- 使用SpringSecurity 進行自定義Token校驗