ionic3开发app后，服务器地址频繁变更场景处理。

背景：

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