Merge branch 'master' into feat/fast-login

Author: Boelroy

example/xconsole-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xconsole",
-  "version": "2.3.43",
+  "version": "2.3.44",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   ],
   "author": "",
   "dependencies": {
-    "@alicloud/xconsole": "^2.3.43",
+    "@alicloud/xconsole": "^2.3.44",
     "lodash": "^4.17.4",
     "moment": "^2.22.1",
     "prop-types": "^15.6.1",

lerna.json

@@ -13,6 +13,6 @@
       "tagVersionPrefix": ""
     }
   },
-  "version": "2.3.43",
+  "version": "2.3.44",
   "lerna": "2.11.0"
 }

packages/console-utils/xconsole-service/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/xconsole-service",
-  "version": "2.4.0-alpha.11",
+  "version": "2.4.0-alpha.13",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
@@ -46,6 +46,7 @@
     "@ungap/url-search-params": "^0.2.2",
     "axios": "^0.19.2",
     "js-cookie": "^2.2.1",
+    "qs": "^6.10.2",
     "swr": "^0.2.3",
     "tslib": "^2.0.0"
   },

packages/console-utils/xconsole-service/src/interceptors/fastloginInterceptor/login.tsx

@@ -17,22 +17,16 @@ export const refreshToken = async () => {
     collina: getCollina(),
   };
 
-  try {
-    const res = await axiosInstance({
-      method: 'get',
-      url: '/tool/user/info.json',
-      // url: 'https://oneapi.alibaba-inc.com/mock/oneconsole/data/api.json?product=consoledemo&action=DescribeUserInfo',
-      data: reqData,
-      timeout: 15000,
-    });
+  const res = await axiosInstance({
+    method: 'get',
+    url: '/tool/user/info.json',
+    data: reqData,
+    timeout: 15000,
+  });
 
-    const { data: { data: resData } } = res;
-    // @ts-ignore
-    window.ALIYUN_CONSOLE_CONFIG && (window.ALIYUN_CONSOLE_CONFIG.SEC_TOKEN = resData?.secToken);
-  } catch (e) {
-    console.log('xxxxxxx',e)
-    // TODO
-  }
+  const { data: { data: resData } } = res;
+  // @ts-ignore
+  window.ALIYUN_CONSOLE_CONFIG && (window.ALIYUN_CONSOLE_CONFIG.SEC_TOKEN = resData?.secToken);
 }
 
 export const LoginContent: React.FC<any> = (props) => {
@@ -49,7 +43,6 @@ export const LoginContent: React.FC<any> = (props) => {
             }
             props.onSuccess()
           } catch(e) {
-            console.log(e)
             props.onError(e);
           }
         })()
@@ -71,24 +64,34 @@ export const LoginContent: React.FC<any> = (props) => {
   )
 }
 
-export const login = (response: AxiosResponse) => {
-  return new window.Promise<AxiosResponse>((resolve, reject) => {
+const requestAgain = async (response: AxiosResponse) =>  {
+  const reqData = new URLSearchParams(response.config.data);
+  reqData.set('sec_token', getSecToken())
+  const newResponse = await axios.request({
+    method: 'post',
+    url: response.config.url,
+    baseURL: '/',
+    data: reqData.toString()
+  });
+  return newResponse;
+}
+
+let loginPromise: Promise<void> = null;
+
+const fastLoginWithDialog = () => {
+  if (loginPromise) {
+    return loginPromise;
+  }
+
+  loginPromise = new window.Promise<void>((resolve, reject) => {
     const div = document.createElement('div');
     document.body.appendChild(div);
     ReactDOM.render(
       <LoginContent
         onSuccess={async () => {
           try {
             setTimeout(async() => {
-              const reqData = new URLSearchParams(response.config.data);
-              reqData.set('sec_token', getSecToken())
-              const newResponse = await axios.request({
-                method: 'post',
-                url: response.config.url,
-                baseURL: '/',
-                data: reqData.toString()
-              })
-              resolve(newResponse);
+              resolve()
               ReactDOM.unmountComponentAtNode(div);
             }, 200)
           } catch (e) {
@@ -97,8 +100,23 @@ export const login = (response: AxiosResponse) => {
         }}
         onError={() => {
           ReactDOM.unmountComponentAtNode(div);
-          reject(response);
+          reject();
         }}
       />, div);
   })
+
+  loginPromise.finally(() => {
+    loginPromise = null;
+  });
+
+  return loginPromise;
+}
+
+export const login = async (response: AxiosResponse) => {
+  try {
+    await fastLoginWithDialog();
+    return await requestAgain(response)
+  } catch (e) {
+    return response;
+  }
 }

packages/console-utils/xconsole-service/src/interceptors/paramsInterceptor/index.ts

@@ -1,9 +1,7 @@
-import URLSearchParams from '@ungap/url-search-params';
+import qs from 'qs';
 import { IOptions } from '../../types';
 import { ApiType } from '../../const/index';
 
-export { URLSearchParams };
-
 // This is an axios request interceptor
 // By using this interceptor, user can transform normal JavaScript data object
 // into an URLSearchParams instance
@@ -12,25 +10,17 @@ function searchParamsInterceptor(config: IOptions): IOptions {
   const { params, data, apiType } = config;
   if (apiType === ApiType.custom) return config;
 
-  function transform(target: any = {}): URLSearchParams {
-    const searchParams = new URLSearchParams();
-    // Iterate over request data and append them to searchParams
-    Object.keys(target).forEach((key) => {
-      const value = target[key];
-      if (typeof value !== 'undefined') {
-        searchParams.append(key, value);
-      }
-    });
-    return searchParams;
-  }
-
-  const paramsSearchParams = transform(params);
-  const dataSearchParams = transform(data);
+  const paramsSearchParams = qs.stringify(params);
+  const dataSearchParams = qs.stringify(data);
 
   // Return the new config
   return {
     ...config,
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
     params: paramsSearchParams,
+    //@ts-ignore
     data: dataSearchParams,
     originParams: params,
     originData: data,

packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/handleDoubleConfirm.tsx

@@ -1,11 +1,12 @@
 import axios, { AxiosResponse } from 'axios';
-import { URLSearchParams } from '../paramsInterceptor/index';
+import qs from 'qs';
 import getVerifyInformation from './getVerifyInformation';
 import {
   guideToVerificationMethodSetting,
   guideToVerificationDetailSetting,
 } from './helpers';
 import { IResponse, IResponseData, Risk } from '../../types';
+import paramsInterceptor from '../paramsInterceptor/index'
 
 export interface IVerifyOptions {
   isVerifyCodeValid: boolean;
@@ -17,6 +18,7 @@ export interface IVerifyOptions {
 }
 
 const axiosInstance = axios.create();
+axiosInstance.interceptors.request.use(paramsInterceptor)
 
 function isVerifyCodeValid(
   res: AxiosResponse | null,
@@ -75,10 +77,10 @@ async function handleDoubleConfirm(
       const {
         config: { data: reqDataString, url: reqUrl },
       } = response;
-      const reqData = new URLSearchParams(reqDataString);
-      reqData.append('verifyType', verifyType);
-      if (verifyCode) reqData.append('verifyCode', verifyCode);
-      if (requestId) reqData.append('requestId', requestId);
+      const reqData = qs.parse(reqDataString)
+      reqData['verifyType'] = verifyType;
+      if (verifyCode) reqData['verifyCode'] = verifyCode;
+      if (requestId) reqData['requestId'] = requestId;
 
       newResponse = await axiosInstance({
         method: 'post',

packages/console-utils/xconsole-service/stories/index.stories.tsx

@@ -18,6 +18,7 @@ defaultAxiosRequest.interceptors.request.handlers.unshift({
       console.log(config.url, config.url.replace(/\/tool\/user\/info\.json/, '/data/api.json?action=DescribeUserInfo'))
       config.url = config.url.replace(/\/tool\/user\/info\.json/, 'data/api.json?action=DescribeUserInfo')
     }
+
     return config;
   }
 });
@@ -28,7 +29,7 @@ storiesOf('XConsole Service', module)
   // .addDecorator(withAxiosDecorator(defaultAxiosRequest))
   .add('AppCode', () => {
     const action = select('action', ['DescribeInstance', 'DescribeAPI'], 'DescribeInstance')
-    const { data, error } = useOpenApi('consoledemo', action, null, { throwDoubleConfirmError: true })
+    const { data, error } = useOpenApi('consoledemo', action, {'xxxx': 'xxxx2'}, { throwDoubleConfirmError: true })
     // @ts-ignore
     console.log(error?.response)
     return <div>{JSON.stringify(data)}{JSON.stringify(error)}</div>

packages/xconsole/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/xconsole",
-  "version": "2.3.43",
+  "version": "2.3.44",
   "repository": {
     "type": "git",
     "url": "https://github.com/aliyun/alibabacloud-console-design.git"
@@ -76,7 +76,7 @@
     "@alicloud/xconsole-rc-page-header": "^2.3.30",
     "@alicloud/xconsole-rc-result": "^2.3.30",
     "@alicloud/xconsole-rc-step": "^1.0.0-beta.1",
-    "@alicloud/xconsole-service": "^2.3.43",
+    "@alicloud/xconsole-service": "^2.3.44",
     "babel-preset-breezr-wind": "^1.0.0-rc.7",
     "commander": "^2.20.0",
     "dva": "2.6.0-beta.20",