背景：

• 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;