tms-auth 1.3.26

package/src/Error/404.tsx

@@ -0,0 +1,18 @@
+import { Result, ConfigProvider } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider prefixCls="ant-tms">
+    <div
+      style={{
+        height: 'calc(100vh - 210px)',
+        background: '#ffffff',
+        borderRadius: '0 0 5px 5px',
+      }}
+    >
+      <Result status="404" title="404" subTitle="找不到页面" />
+    </div>
+  </ConfigProvider>
+);
+
+export default App;

package/src/actions/lang.js

@@ -0,0 +1,5 @@
+export const UPDATE_LANG = 'UPDATE_LANG';
+
+export function updateLang(text) {
+  return { type: UPDATE_LANG, text };
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+import TMS_Layout, { Tms_Error_Handle } from './layouts/BaseLayout';
+import TMS_Login from './login/Login';
+import TMS_Login_Callback from './login/Callback';
+import TMS_Default_Index from './login/Index';
+import Tms_404 from './Error/404';
+import Tms_403 from './Error/403';
+import TmsSdk from './utils/sdk';
+
+export const TmsErrorHandle = Tms_Error_Handle;
+export const TmsIndex = TMS_Default_Index;
+export const TmsLayout = TMS_Layout;
+export const TmsLogin = TMS_Login;
+export const TmsLoginCallback = TMS_Login_Callback;
+export const Tms404 = Tms_404;
+export const Tms403 = Tms_403;
+export const Tms = TmsSdk;
+
+export default {
+  Tms,
+
+  TmsLayout,
+  TmsLogin,
+  TmsLoginCallback,
+  TmsIndex,
+  Tms404,
+  Tms403,
+  TmsErrorHandle,
+};

package/src/layouts/BaseLayout.tsx

@@ -0,0 +1,518 @@
+import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { Button, ConfigProvider, Result } from 'antd';
+import { toSearchObj } from '@/utils/utils';
+import { Provider } from 'react-redux';
+import { history } from 'umi';
+import GlobalNavigationBar from './NavigationBar';
+import GlobalHeader from './Header';
+import TMS_Iframe from './Ifame/index';
+import BrandBand from '@salesforce/design-system-react/components/brand-band';
+import Loading from './Loading/index';
+import store from '@/store';
+import Tms from '@/utils/sdk';
+
+import './index.less';
+
+export interface BaseLayoutProps {
+  loadMenuSuccess?: (res: any) => void;
+  children?: ReactNode;
+  /** 自定义右上角 */
+  headerRight?: ReactNode;
+  /** 右上角额外入口 */
+  headerRightExtra?: ReactNode;
+  callback?: (e: { eventName: string; isSuccess: boolean; data: any }) => void;
+  //是否隐藏语言
+  hiddenLanguage?: boolean;
+}
+
+const env = process.env.NODE_ENV;
+const IS_DEV = window.location.hostname == 'localhost';
+
+const style: CSSProperties = {
+  height: '100vh',
+  width: '100vw',
+  position: 'fixed',
+  zIndex: 1000,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: '#ffffff',
+};
+
+// 排序 menu 和 app 菜单
+const sortList = (list: any[]) => {
+  const new_list = (list || []).sort((a: any, b: any) => {
+    let a_sort = typeof a.sortOrder === 'object' ? Number.MAX_SAFE_INTEGER : a.sortOrder;
+    let b_sort = typeof b.sortOrder === 'object' ? Number.MAX_SAFE_INTEGER : b.sortOrder;
+    return a_sort == b_sort ? a.id - b.id : a_sort - b_sort;
+  });
+
+  const hasChild = new_list.some((item) => item.children && item.children.length > 0);
+  if (hasChild) {
+    // children也要sort
+    const listWithChildren = new_list.map((item) => {
+      const children_list = item.children;
+      const newItem = item;
+      if (children_list && children_list.length > 0) {
+        newItem.children = sortList(item.children);
+      }
+      return newItem;
+    });
+    return listWithChildren;
+  } else {
+    return new_list;
+  }
+};
+
+const BaseLayout: React.FC<BaseLayoutProps> = (props) => {
+  const appConfig = Tms.getConfig();
+  const TmsStorage = Tms.getStorage();
+
+  const locationQuery = toSearchObj(window.location.search);
+
+  const [init, setInit] = useState(true);
+  const [reload, setReload] = useState(false);
+  const [allMenus, setAllMenu] = useState<any>(null);
+  const [iframeUrl, setIframeUrl] = useState('');
+  const [hideMenu, _setHideMenu] = useState(locationQuery.showWithoutMenu);
+  const [isIframe, _setIsIframe] = useState(locationQuery.showAsIframe);
+  const [lang, setLang] = useState('cn');
+  const recordPath = () => {
+    const pathname = window.location.pathname;
+    if (
+      pathname !== appConfig.loginPath &&
+      pathname !== appConfig.error404Path &&
+      pathname !== appConfig.error403Path
+    ) {
+      console.log('记录LAST_PATH: ' + window.location.href);
+      TmsStorage.setItem(appConfig.lastPathKey, window.location.href);
+    }
+  };
+
+  // 获取有权限的 菜单 和 APP 列表
+  const getMenus = (tokenInfo: object) => {
+    const getAuthAppPromise = () => {
+      return new Promise<any[]>((resolve, reject) => {
+        return Tms.getAuthApp()
+          .then((appRes: any) => {
+            console.log('appRes', appRes);
+            const appList = sortList(appRes.data);
+            resolve(appList || []);
+          })
+          .catch((res: any) => {
+            reject(res);
+          });
+      });
+    };
+
+    const getAuthMenuPromise = (appList: Record<string, string>[]) => {
+      const isEnglish = appConfig.lang == 'en';
+      const currentApp_str = TmsStorage.getItem(appConfig.curAppKey);
+      let currentApp = currentApp_str ? JSON.parse(currentApp_str) : '';
+
+      if (!(currentApp_str && IS_DEV)) {
+        // 开发环境下不需要重置当前应用
+        if (appList && appList.length > 0) {
+          const appIndex = appList.findIndex((item) => {
+            const appDomain = item.appDomain || item.defaultDomain || '';
+            return appDomain.indexOf(window.location.host) != -1;
+          });
+          if (appIndex == -1) {
+            if (IS_DEV) {
+              console.log('加载应用：找不到应用权限，但目前在开发环境下，默认加载第一个应用');
+              currentApp = appList[0];
+              TmsStorage.setItem(appConfig.curAppKey, JSON.stringify(currentApp));
+              Tms.updateDocumentIcon(currentApp.icon);
+              Tms.updateDocumentTitle(
+                isEnglish
+                  ? currentApp.appEnName || currentApp.appName + (IS_DEV ? 'en' : '')
+                  : currentApp.appName,
+              );
+            } else {
+              console.log('加载应用：找不到应用权限');
+              history.push(appConfig.error403Path);
+              currentApp = {};
+            }
+          } else {
+            console.log('加载应用：加载与当前域名对应的应用');
+            currentApp = appList[appIndex];
+            TmsStorage.setItem(appConfig.curAppKey, JSON.stringify(currentApp));
+            Tms.updateDocumentIcon(currentApp.icon);
+            Tms.updateDocumentTitle(
+              isEnglish
+                ? currentApp.appEnName || currentApp.appName + (IS_DEV ? 'en' : '')
+                : currentApp.appName,
+            );
+          }
+        }
+      } else {
+        console.log('加载应用：（从缓存Storage获取）', IS_DEV, currentApp_str);
+        Tms.updateDocumentIcon(currentApp.icon);
+        Tms.updateDocumentTitle(
+          isEnglish
+            ? currentApp.appEnName || currentApp.appName + (IS_DEV ? 'en' : '')
+            : currentApp.appName,
+        );
+      }
+
+      return new Promise((resolve, reject) => {
+        if (currentApp && currentApp.appId) {
+          return Tms.getAuthMenu({
+            appId: currentApp ? currentApp.appId : appList?.[0].appId,
+          })
+            .then((menuRes: any) => {
+              console.log('menuRes', menuRes);
+              const menuList = sortList(menuRes.data);
+              resolve(menuList || []);
+            })
+            .catch((res: any) => {
+              reject(res);
+            });
+        } else {
+          resolve([]);
+        }
+      });
+    };
+
+    return new Promise((resolve, reject) => {
+      getAuthAppPromise()
+        .then((appRes) => {
+          getAuthMenuPromise(appRes)
+            .then((menuRes) => {
+              resolve({
+                app: appRes,
+                home: menuRes,
+              });
+            })
+            .catch((err) => {
+              console.log('getAuthMenuPromise  catch ', err);
+              throw err;
+            });
+        })
+        .catch((res: any) => {
+          console.log('promises all', res);
+          const { code, msg, data, httpStatus } = res;
+          switch (httpStatus) {
+            case 424:
+            case 426: {
+              recordPath();
+              console.log('需重新登录或刷新token');
+              Tms.refreshTokenWithAutoLogin()
+                .then(() => {
+                  history.replace(appConfig.indexPath);
+                })
+                .catch(() => {
+                  console.log('刷新有问题，退出登录');
+                  Tms.logout()
+                    .then(() => {
+                      history.replace(appConfig.loginPath);
+                    })
+                    .catch(() => {
+                      history.replace(appConfig.loginPath);
+                    });
+                });
+              break;
+            }
+            case 511: {
+              recordPath();
+              console.log('Token过期，重定向至登录页面');
+              history.replace(appConfig.loginPath);
+              break;
+            }
+            case 401:
+            case 403: {
+              httpStatus === 403 && recordPath();
+              console.log('退出登录');
+              Tms.logout()
+                .then(() => {
+                  history.replace(appConfig.loginPath);
+                })
+                .catch(() => {
+                  history.replace(appConfig.loginPath);
+                });
+              break;
+            }
+            case 'failFecth': {
+              reject(httpStatus);
+              break;
+            }
+            default: {
+              alert(msg);
+              break;
+            }
+          }
+        });
+    });
+  };
+
+  // 记录当前路径后自动跳转到login
+  const recordPathAndJumpLogin = () => {
+    if (
+      ![appConfig.loginPath, appConfig.error403Path, appConfig.error404Path].includes(
+        window.location.pathname,
+      )
+    ) {
+      Tms.recordCurrentPath(window.location.href).then(() => {
+        history.replace(appConfig.loginPath);
+      });
+    } else {
+      history.replace(appConfig.loginPath);
+    }
+  };
+
+  useEffect(() => {
+    try {
+      const token = TmsStorage.getItem(appConfig.tokenKey);
+      const tokenInfo = token ? JSON.parse(token) : '';
+      if (tokenInfo) {
+        getMenus(tokenInfo)
+          .then((res: any) => {
+            console.log('getMenus', res);
+            setAllMenu(res);
+            props.loadMenuSuccess && props.loadMenuSuccess(res);
+          })
+          .catch((error) => {
+            console.log(error, 'error');
+            if (error === 'failFecth') {
+              setReload(true);
+            }
+          });
+      } else {
+        recordPathAndJumpLogin();
+      }
+    } catch (error) {
+      TmsStorage.removeItem(appConfig.tokenKey);
+      recordPathAndJumpLogin();
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('popstate', function (e) {
+      let query = toSearchObj(window.location.search);
+      //监听返回事件，如果是iframe页面则刷新当前页面
+      if (query.showAsIframe) {
+        history.go(0);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    const { path } = locationQuery;
+    if (isIframe && path) {
+      console.log('iframeUrl', path);
+      setIframeUrl(
+        decodeURIComponent(
+          (path + '&tms-iframe-random=' + localStorage.getItem('tms-iframe-random')) as string,
+        ),
+      );
+    } else if (hideMenu) {
+      setIframeUrl(window.location.href);
+    }
+  }, [locationQuery, isIframe, hideMenu]);
+
+  useEffect(() => {
+    if (locationQuery.lang) {
+      if (localStorage.getItem('tms-lang') !== locationQuery.lang) {
+        props?.callback?.({
+          eventName: 'tms-update-language',
+          isSuccess: true,
+          data: locationQuery.lang,
+        });
+        localStorage.setItem('tms-lang', locationQuery.lang as string);
+      }
+    }
+  }, [locationQuery.lang]);
+
+  const getIframeUrl = (curUrl: string) => {
+    let curSearch = `?showAsIframe=true&path=${encodeURIComponent(curUrl)}`;
+    return location.origin + location.pathname + curSearch;
+  };
+
+  useEffect(() => {
+    //重置tms-iframeUrl
+    localStorage.setItem('tms-iframeUrl', '');
+  }, []);
+
+  useEffect(() => {
+    let listener = (e: any) => {
+      try {
+        const data = JSON.parse(e.data);
+        if (data.type === 'urlChange') {
+          let query: any = toSearchObj(window.location.search);
+          let url = data.url;
+          if (url.includes(decodeURIComponent(query.path))) return;
+          console.log(url, 'urlChange');
+          //判断前后2次url是否相同，相同则不处理
+          let tmsIframeUrl = localStorage.getItem('tms-iframeUrl');
+          if (tmsIframeUrl == url) return;
+          localStorage.setItem('tms-iframeUrl', url);
+          let curUrl = url.includes('?')
+            ? url + '&showWithoutMenu=true'
+            : url + '?showWithoutMenu=true';
+
+          window.history.pushState(0, '', getIframeUrl(curUrl));
+        }
+      } catch (error) {}
+    };
+    if (isIframe) {
+      window.addEventListener('message', listener, false);
+    }
+    return () => {
+      removeEventListener('message', listener);
+    };
+  }, [isIframe]);
+
+  useEffect(() => {
+    if (window != window.top) {
+      //判断当前是否为iframe环境
+      window?.parent?.postMessage(
+        JSON.stringify({ type: 'urlChange', url: window.location.href }),
+        '*',
+      );
+    }
+  }, [props.children]);
+
+  if (reload) {
+    return (
+      <>
+        <Provider store={store}>
+          <GlobalHeader langChange={setLang} appMenus={[]} hiddenLanguage={props.hiddenLanguage} />
+          <GlobalNavigationBar allMenus={[]} callbackToAPPSystem={props.callback} />
+          <div
+            style={{
+              height: 'calc(100vh - 105px)',
+              background: '#ffffff',
+              borderRadius: '0 0 5px 5px',
+              textAlign: 'center',
+              paddingTop: '10vh',
+            }}
+          >
+            <Result
+              status="500"
+              title="500"
+              subTitle={lang == 'cn' ? '网络异常，请重试。' : 'Network error, please try again.'}
+              extra={
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    setReload(false);
+                    recordPathAndJumpLogin();
+                  }}
+                >
+                  {lang == 'cn' ? '重试' : 'ReTry'}
+                </Button>
+              }
+            />
+          </div>
+        </Provider>
+      </>
+    );
+  }
+
+  return (
+    <ConfigProvider prefixCls="ant-tms">
+      {allMenus ? (
+        <Loading loading={false} overlayStyle={style}>
+          {hideMenu ? (
+            <div />
+          ) : (
+            <Provider store={store}>
+              <GlobalHeader
+                langChange={setLang}
+                appMenus={allMenus?.app}
+                headerRight={props.headerRight}
+                headerRightExtra={props.headerRightExtra}
+                callbackToAPPSystem={props.callback}
+                hiddenLanguage={props.hiddenLanguage}
+              />
+              <GlobalNavigationBar allMenus={allMenus} callbackToAPPSystem={props.callback} />
+            </Provider>
+          )}
+
+          <BrandBand
+            id="brand-band-lightning-blue"
+            background="rgb(176, 196, 223)"
+            className={['slds-p-around_small', 'cl-main', `${hideMenu ? 'no-padding' : ''}`]}
+            theme="lightning-blue"
+          >
+            <div className="tms-layout-main">
+              {isIframe ? iframeUrl && <TMS_Iframe src={iframeUrl} lang={lang} /> : props.children}
+            </div>
+          </BrandBand>
+        </Loading>
+      ) : (
+        <div className="baseLayout-ignore" />
+      )}
+    </ConfigProvider>
+  );
+};
+
+export const recordPath = () => {
+  const tmsStorage = Tms.getStorage();
+  const tmsConfig = Tms.getConfig();
+
+  const pathname = window.location.pathname;
+  if (
+    pathname !== tmsConfig.loginPath &&
+    pathname !== tmsConfig.error404Path &&
+    pathname !== tmsConfig.error403Path
+  ) {
+    console.log('记录LAST_PATH: ' + window.location.href);
+    tmsStorage.setItem(tmsConfig.lastPathKey, window.location.href);
+  }
+};
+
+export const Tms_Error_Handle = () => {
+  let can = true;
+  const tmsStorage = Tms.getStorage();
+  const tmsConfig = Tms.getConfig();
+
+  const errorHanlde = (httpStatus: number) => {
+    if (!can) {
+      return;
+    }
+
+    switch (httpStatus) {
+      case 426:
+      case 424:
+        console.log('需重新登录或刷新token');
+        // 避免多次同时刷新token
+        can = false;
+        recordPath();
+        Tms.refreshTokenWithAutoLogin()
+          .then(() => history.replace(tmsConfig.indexPath))
+          .catch(() => {
+            console.log('刷新有问题，退出登录');
+            Tms.logout().finally(() => {
+              history.replace(tmsConfig.loginPath);
+            });
+          })
+          .finally(() => (can = true));
+        break;
+      case 511:
+        console.log('Token过期，重定向至登录页面');
+        recordPath();
+        if (window != window.top) {
+          //判断当前是否为iframe环境
+          window?.parent?.postMessage(JSON.stringify({ type: 'logout' }), '*');
+        }
+        history.replace(tmsConfig.loginPath);
+        break;
+      case 401:
+      case 403: {
+        console.log('退出登录');
+        httpStatus === 403 && recordPath();
+        Tms.logout().finally(() => {
+          history.replace(tmsConfig.loginPath);
+        });
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  return errorHanlde;
+};
+
+export default BaseLayout;

package/src/layouts/Header.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import HeaderLeft from './HeaderLeft';
+import HeaderRight from './HeaderRight';
+
+export interface HeaderProps {
+  /** 自定义右上角 */
+  headerRight?: ReactNode;
+  /** 右上角额外入口 */
+  headerRightExtra?: ReactNode;
+  callbackToAPPSystem?: (message: { eventName: string; isSuccess: boolean; data: any }) => void;
+  langChange?: (e: string) => void;
+}
+
+const Header = (props: HeaderProps) => {
+  const { headerRight, headerRightExtra } = props;
+
+  return (
+    <div
+      className="slds-global-header slds-grid slds-grid_align-spread"
+      style={{ borderBottom: `1px solid #e0e0e0`, height: '63px' }}
+    >
+      <div className="slds-global-header__item">
+        <HeaderLeft {...props} />
+      </div>
+      <div className="slds-global-header__item">
+        {headerRightExtra}
+        {headerRight ? headerRight : <HeaderRight {...props} />}
+      </div>
+    </div>
+  );
+};
+
+export default Header;