fix: not local ip access mini tips

ycjcl868 · ycjcl868 · commit fffdcf912baf · 2019-10-11T17:22:23.000+08:00
diff --git a/packages/umi-plugin-ui/src/bubble/Error.jsx b/packages/umi-plugin-ui/src/bubble/Error.jsx
@@ -30,15 +30,18 @@ const ErrorWrapper = styled.div`
   span {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.65);
+    font-weight: 300;
   }
 `;
 
-export default ({ isBigfish, message }) => (
+export default ({ isBigfish, message, tips }) => (
   <ErrorWrapper>
-    <ErrorSvg />
-    <p>
-      {isBigfish ? 'Bigfish' : 'Umi'} {message.offline}
-    </p>
-    <span>{message.restart}</span>
+    <div style={{ maxWidth: '45%' }}>
+      <ErrorSvg />
+      <p>
+        {isBigfish ? 'Bigfish' : 'Umi'} {message.offline}
+      </p>
+      <span>{tips || message.restart}</span>
+    </div>
   </ErrorWrapper>
 );
diff --git a/packages/umi-plugin-ui/src/bubble/bubble-locale/en-US.js b/packages/umi-plugin-ui/src/bubble/bubble-locale/en-US.js
@@ -5,4 +5,6 @@ export default {
   offline: 'UI connection failed',
   restart: 'Please try restarting the dev service',
   loading: 'Loading',
+  code_1002:
+    'Umi UI does not allow non-local IP access for project security reasons, if you want non-local IP access, add HOST=0.0.0.0 environment variable at startup',
 };
diff --git a/packages/umi-plugin-ui/src/bubble/bubble-locale/pt-BR.js b/packages/umi-plugin-ui/src/bubble/bubble-locale/pt-BR.js
@@ -5,4 +5,6 @@ export default {
   offline: 'UI falha na conexão',
   restart: 'Por favor, tente reiniciar o serviço dev',
   loading: 'Carregar',
+  code_1002:
+    'A interface do usuário do Umi não permite acesso IP não local por razões de segurança do projeto. Se você deseja acesso IP local, adicione a variável de ambiente HOST = 0.0.0.0 na inicialização',
 };
diff --git a/packages/umi-plugin-ui/src/bubble/bubble-locale/zh-CN.js b/packages/umi-plugin-ui/src/bubble/bubble-locale/zh-CN.js
@@ -5,4 +5,6 @@ export default {
   offline: 'UI 连接失败',
   restart: '请尝试重启 dev 服务',
   loading: '加载中',
+  code_1002:
+    'Umi UI 出于项目安全考虑，不允许非本地 IP 访问，如果希望非本地 IP 访问，启动时加上 HOST=0.0.0.0 环境变量',
 };
diff --git a/packages/umi-plugin-ui/src/bubble/bubble-locale/zh-TW.js b/packages/umi-plugin-ui/src/bubble/bubble-locale/zh-TW.js
@@ -5,4 +5,6 @@ export default {
   offline: 'UI 連接失敗',
   restart: '請嘗試重啟 dev 服務',
   loading: '加載中',
+  code_1002:
+    'Umi UI 出於項目安全考慮，不允許非本地 IP 訪問，如果希望非本地 IP 訪問，啟動時加上 HOST=0.0.0.0 環境變量',
 };
diff --git a/packages/umi-plugin-ui/src/bubble/index.jsx b/packages/umi-plugin-ui/src/bubble/index.jsx
@@ -48,6 +48,7 @@ class App extends React.Component {
       locale,
       edit: false,
       editText: {},
+      tips: '',
     };
     window.addEventListener('message', this.handleMessage, false);
     const { hostname, protocol } = window.location;
@@ -69,6 +70,9 @@ class App extends React.Component {
   }
 
   componentWillUnmount() {
+    this.setState({
+      tips: '',
+    });
     window.removeEventListener('message', this.handleMessage, false);
   }
 
@@ -125,11 +129,16 @@ class App extends React.Component {
 
   async componentDidMount() {
     const { path } = this.props;
+    const message = this.getMessage();
     try {
       await initSocket(`${this.baseUrl}/umiui`, {
-        onError: () => {
+        onError: e => {
+          // https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent
+          // 非 localhost 访问
+          const { code } = e;
           this.setState({
             connected: false,
+            tips: message[`code_${code}`] || '',
           });
         },
         onMessage: ({ type, payload }) => {
@@ -218,14 +227,19 @@ class App extends React.Component {
     });
   };
 
+  getMessage = () => {
+    const { locale } = this.state;
+    return messages[locale] || messages['zh-CN'];
+  };
+
   render() {
-    const { open, connected, uiLoaded, loading, locale, edit, editText } = this.state;
+    const { open, connected, uiLoaded, loading, locale, edit, editText, tips } = this.state;
     const { isBigfish = false } = this.props;
     const miniUrl = this.getMiniUrl();
     // get locale when first render
     // switch in the project can't be listened, the lifecycle can't be trigger
     // TODO: use Context but need to compatible with other React version
-    const message = messages[locale] || messages['zh-CN'];
+    const message = this.getMessage();
 
     return (
       <Bubble
@@ -242,14 +256,14 @@ class App extends React.Component {
       >
         {open !== undefined && (
           <Modal visible={open}>
-            {!uiLoaded && (
+            {!uiLoaded && !tips && (
               <LoadingWrapper>
                 <Loading />
                 <p style={{ marginTop: 8 }}>{message.loading}</p>
               </LoadingWrapper>
             )}
             {!connected ? (
-              <Error message={message} isBigfish={isBigfish} />
+              <Error message={message} tips={tips} isBigfish={isBigfish} />
             ) : (
               <iframe
                 id="umi-ui-bubble"
