一套代码跑多端:uni-app 报表前端实战

适合：内部系统、工具类 App、需要快速铺多端的业务。

不适合：对包体积 / 性能极致敏感、重度依赖某端原生能力的场景。

{   "pages": [     { "path": "pages/login/loading" },   // 第一项 = 启动页     { "path": "pages/login/login" },     { "path": "pages/home/home" },     { "path": "pages/report/add-report" },     { "path": "pages/login/CallbackView" }   ],   "tabBar": {     "list": [       { "pagePath": "pages/home/home", "text": "首页" },       { "pagePath": "pages/my/my",     "text": "我的" }     ]   } }

function checkToken() {   const token = uni.getStorageSync('token')   if (!token) {     uni.reLaunch({ url: '/pages/login/login' })  // 没 token 直接踢回登录     return false   }   return true }  export const request = (options) => {   return new Promise((resolve, reject) => {     if (!checkToken()) return reject('Token invalid')     uni.request({       url: options.url,       method: options.method || 'GET',       header: { 'Authorization': `Bearer ${uni.getStorageSync('token')}` },       success: (res) => {         if (res.statusCode === 401 || res.statusCode === 403) {           // 401/403：跳转登录页           uni.reLaunch({ url: '/pages/login/login' })           return         }         resolve(res.data)       },       fail: reject     })   }) }

// if (!isRefreshing) { //   isRefreshing = true //   refreshToken().then(success => { //     isRefreshing = false //     if (success) { //       requests.forEach(cb => cb())  // 刷新成功后重试所有挂起的请求 //       requests = [] //     } else { //       uni.reLaunch({ url: '/pages/login/login' }) //     } //   }) // }

正确做法：401 时应该用 isRefreshing 标志位挡住并发，用 requests 队列把过期期间的请求缓存起来，refresh 成功后再重放。上面那段注释就是标准答案，上线前把注释去掉、并在 refresh 失败时清 token 跳登录即可。否则现在的行为是：Token 一过期，同时在发的 N 个请求会 N 次跳登录页。

export function getAuthUrl() {   const verifier = generateCodeVerifier();   uni.setStorageSync('pkce_verifier', verifier);   // 先存挑战原文   const challenge = generateCodeChallenge(verifier);   const openId = uni.getStorageSync("openId");   return `${SSO_BASE_URL}/oauth2/authorize?response_type=code`     + `&client_id=${authConfig.clientId}`     + `&redirect_uri=${encodeURIComponent(authConfig.redirectUri)}`     + `&code_challenge=${challenge}`     + `&code_challenge_method=S256`     + `&wx_openid=${openId}`; }

// CallbackView.vue  onLoad(options) const code = options.code || ''; if (code) {   exchangeCodeForToken(code).then(response => {     if (response.statusCode === 200) {       uni.setStorageSync('token', response.data.access_token);       uni.reLaunch({ url: '/pages/home/home' });  // 落地首页     }   }); }  // utils/auth.js —— 用 code_verifier 换 token async function getToken(code, verifier, authConfig) {   return uni.request({     url: `${SSO_BASE_URL}/oauth2/token`,     method: 'POST',     header: { 'Content-Type': 'application/x-www-form-urlencoded' },     data: Object.entries({       grant_type: 'authorization_code',       code, redirect_uri: authConfig.redirectUri,       client_id: authConfig.clientId,       client_secret: authConfig.clientSecret,       code_verifier: verifier                // PKCE 核心：证明"我就是刚才发起授权那个"     }).map(([k,v]) => `${k}=${encodeURIComponent(v)}`).join('&')   }) }

export const generateCodeVerifier = () => {   const array = new Uint8Array(32);   getRandomValues(array);   // ← 被下面自定义函数"劫持"了   return Array.from(array, b => b.toString(16).padStart(2,'0')).join(''); }  var getRandomValues = function (array) {   for (var i = 0, l = array.length; i < l; i++) {     array[i] = Math.floor(Math.random() * 256);  // ← 不安全！   }   return array; }

修复：verifier 是 PKCE 安全性的根基，必须用 CSPRNG。小程序环境用 wx.getRandomValues 或 crypto.getRandomValues（注意别起个同名局部函数把它覆盖掉）；H5 用 crypto.getRandomValues + base64url。Math.random() 可预测，等于 PKCE 形同虚设。

export const authConfig = {   redirectUri: 'http://192.168.1.8/sso/api/auth/callback/app',   clientId: '81351278-c240-4a13-bbeb-122551134f84',   clientSecret: '75af2180-2022-4b28-b432-25f02718a5ee'  // ← 打包进前端，谁都能看到 }