ionic3開發app後,伺服器地址頻繁變更場景處理。
阿新 • • 發佈:2018-11-03
背景:
- PC端產品配套開發的app,使用ionic3開發。
- 由於產品部署在公司內網環境,外部需要使用vpn訪問,vpn分發的地址隨機且頻繁變更,導致App打包頻繁。
- 部署給不同的廠家,地址也是不同的。
解決思路:
- 配置一個預設的伺服器地址,當預設地址訪問失敗時將訊息發出。
- 登入頁新增一個伺服器地址輸入框,當接受到地址訪問失敗的訊息後顯示出來。
- 讓使用者重新輸入下新的伺服器地址,訪問成功後快取起來。
程式碼實現:
- 地址服務
/** *@模組名稱:AddressService * *@作用:伺服器IP地址更改後需要重新更改IP地址 該服務是管理IP更改的狀態 * *@date 2018/10/29 * */ import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class AddressService { constructor() {} private Source = new Subject<any>(); Status$ = this.Source.asObservable(); /** * 通知模組伺服器地址改變了 需要從新輸入地址 * @param message false 地址改變 將地址框顯示出來 */ addressChange(message: any) { const msg = JSON.parse(message); this.Source.next(msg); this.setAddressStatus = false; } getAddressStatus() { const address = localStorage.getItem('app-video-ai-status') if (address === 'false') { return false; } return true; } /** * 設定伺服器地址狀態 * @param val */ set setAddressStatus(val) { localStorage.setItem('app-video-ai-status', val); } /** * 清理伺服器地址狀態 */ clearAddressStatus() { localStorage.removeItem('app-video-ai-status'); } clearAll() { } clearItem(key) { localStorage.removeItem(key); } /** * 獲取伺服器地址 * @returns {string} */ getAddress() { return localStorage.getItem('app-video-ai-address') } /** * 設定伺服器地址 * @param val */ set setAddress(val) { localStorage.setItem('app-video-ai-address', val) } }
- http服務
/** * WebSocket地址管理 * @returns {string} */ get getWebSocketUrl() { let ip = this.getAddress; if (!ip) { ip = this.webSocketUrl; } return ip + '/api/websocket' } /** * 獲取伺服器地址 快取中有地址則使用快取地址 否則使用預設配置地址 * @returns {string} */ get getAddress() { let ip = this.address.getAddress() || ''; if (ip) { if (!ip.startsWith('http://')) { ip = 'http://' + ip; } } return ip; } /** * @函式名稱:getExternalNetwork * @param url 路徑 * @作用:拼接下發的url * @return:url 路徑 * @date 2018/7/19 */ getExternalNetwork(url) { let realUrl; const ip = this.getAddress; if (url.startsWith('upms')) { realUrl = (ip || this.upmsUrl) + '/' + url; } else if(url.startsWith('/upms')) { realUrl = (ip || this.upmsUrl) + url; } else if(url.startsWith('api')) { realUrl = (ip || this.apiUrl) + '/' + url; } else { realUrl = (ip + this.apiUrl) + url } url = realUrl; return url; }
- 登入頁面設定
<ion-item class="loginInput ion-item" [hidden]="ipHidden"> <ion-input type="text" placeholder="請輸入伺服器地址" autocomplete="true" #ip value="{{ipAddress}}"> </ion-input> </ion-item>
// 登入成功後隱藏輸入框 快取伺服器地址 me.setAddress(true); me.address.setAddressStatus = true; me.address.setAddress = ip.value;