@cloudbase/framework-plugin-low-code 0.6.67 → 0.7.0

package/template/src/handlers/render.jsx

@@ -1,117 +1,17 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import * as _ from 'lodash';
-import { ForContext, getComponentRenderList } from './FieldMiddleware/renderer';
+import { CompRenderer, ForContext } from './FieldMiddleware/renderer';
 import { isScopeSlot } from '../utils/index';
-import { observer } from 'mobx-react-lite';
 
-export function getComponentChildren(component, context = {}) {
+function getComponentChildren(component) {
   const { properties } = component;
   if (!properties) {
     return [];
   }
-  const list = Object.values(properties).sort(
+  return Object.values(properties).sort(
     (a, b) => (a['x-index'] || 0) - (b['x-index'] || 0)
   );
-  const {
-    virtualFields,
-    codeContext,
-    scopeContext,
-    forContext,
-    injectContext = {},
-    dataContext,
-    updateContext,
-  } = context;
-
-  return list.map((schema) => {
-    return getRenderList({
-      key: schema.key,
-      componentSchema: schema,
-      rootNode: false,
-      renderSlot: false,
-      virtualFields,
-      codeContext,
-      scopeContext,
-      forContext,
-      injectContext,
-      context: dataContext,
-      updateContext,
-    });
-  });
-}
-
-function getRenderList(props) {
-  const {
-    key = '',
-    className,
-    virtualFields,
-    componentSchema,
-    renderSlot,
-    rootNode = true,
-    codeContext,
-    scopeContext = {},
-    context = {},
-    updateContext,
-    forContext = {},
-  } = props;
-
-  const { 'x-props': xProps, properties = {} } = componentSchema;
-
-  // 判断是否为 slot
-  const isSlot = !xProps;
-  if (isSlot && !(renderSlot || rootNode)) {
-    return null;
-  }
-
-  // const preClassName = useRef();
-
-  // wrapperClass
-  const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
-    let { classNameList = [] } = containerEl['x-props'];
-
-    // 先替换掉先前计算出来的className部分
-    // if (preClassName.current) {
-    //   if (preClassName.current !== className) {
-    //     classNameList = classNameList.filter(
-    //       (clsName) => clsName !== preClassName.current
-    //     );
-    //     preClassName.current = className;
-    //   }
-    // } else {
-    //   preClassName.current = className;
-    // }
-
-    containerEl['x-props'].classNameList = Array.from(
-      new Set([className, ...classNameList])
-    );
-  }
-
-  if (xProps && xProps.sourceKey) {
-    const { sourceKey } = xProps;
-    const Field = virtualFields[sourceKey];
-    if (!Field) {
-      return (
-        <div style={{ color: 'red' }}>
-          组件<em>{sourceKey}</em>未找到
-        </div>
-      );
-    }
-  }
-
-  return getComponentRenderList({
-    key,
-    componentSchema,
-    id: componentSchema.key,
-    xProps,
-    emitEvents: componentSchema.emitEvents || [],
-    virtualFields,
-    renderSlot,
-    codeContext,
-    scopeContext,
-    forContext,
-    context,
-    updateContext,
-  });
 }
 
 export function generateSlotMetaMap(componentSchema, context, options = {}) {
@@ -136,10 +36,14 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
         node: isHOC
           ? (props) => {
               let clonedScopeContext = _.cloneDeep(scopeContext);
-              _.set(clonedScopeContext, `${componentSchema.key}.${key}`, props);
+              _.set(
+                clonedScopeContext,
+                `${componentSchema.key}.${child.key}`,
+                props
+              );
               return (
                 <AppRender
-                  key={key}
+                  key={child.key}
                   componentSchema={child}
                   renderSlot={options?.renderSlot}
                   virtualFields={virtualFields}
@@ -154,7 +58,7 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
               return (
                 <ForContext.Provider value={forContext}>
                   <AppRender
-                    key={key}
+                    key={child.key}
                     componentSchema={child}
                     renderSlot={options?.renderSlot}
                     virtualFields={virtualFields}
@@ -172,10 +76,89 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
   return slots;
 }
 
-export const AppRender = observer(function (props) {
-  return getRenderList({
-    ...props,
-    forContext: React.useContext(ForContext),
-    injectContext: {},
-  });
-});
+export function AppRender(props) {
+  const {
+    className,
+    virtualFields,
+    componentSchema,
+    renderSlot,
+    rootNode = true,
+    codeContext,
+    scopeContext = {},
+    context = {},
+    updateContext,
+  } = props;
+
+  const { 'x-props': xProps, properties = {} } = componentSchema;
+
+  // 判断是否为 slot
+  const isSlot = !xProps;
+  if (isSlot && !(renderSlot || rootNode)) {
+    return null;
+  }
+
+  const preClassName = useRef();
+
+  // wrapperClass
+  const containerEl = Object.values(properties)[0];
+  if (containerEl && containerEl['x-props'] && className) {
+    let { classNameList = [] } = containerEl['x-props'];
+
+    // 先替换掉先前计算出来的className部分
+    if (preClassName.current) {
+      if (preClassName.current !== className) {
+        classNameList = classNameList.filter(
+          (clsName) => clsName !== preClassName.current
+        );
+        preClassName.current = className;
+      }
+    } else {
+      preClassName.current = className;
+    }
+
+    containerEl['x-props'].classNameList = [className, ...classNameList];
+  }
+
+  if (xProps && xProps.sourceKey) {
+    const { sourceKey } = xProps;
+    const Field = virtualFields[sourceKey];
+    if (!Field) {
+      return (
+        <div style={{ color: 'red' }}>
+          组件<em>{sourceKey}</em>未找到
+        </div>
+      );
+    }
+  }
+
+  const children = getComponentChildren(componentSchema);
+
+  return (
+    <CompRenderer
+      id={componentSchema.key}
+      xProps={xProps}
+      emitEvents={componentSchema.emitEvents || []}
+      componentSchema={componentSchema}
+      virtualFields={virtualFields}
+      renderSlot={renderSlot}
+      codeContext={codeContext}
+      scopeContext={scopeContext}
+      context={context}
+      updateContext={updateContext}
+    >
+      {children.map((comp) => (
+        <AppRender
+          key={comp.key}
+          componentSchema={comp}
+          rootNode={false}
+          renderSlot={false}
+          virtualFields={virtualFields}
+          codeContext={codeContext}
+          scopeContext={scopeContext}
+          context={context}
+          updateContext={updateContext}
+        />
+      ))}
+    </CompRenderer>
+  );
+}

package/template/src/handlers/utils/common.js

@@ -1,4 +1,11 @@
 import config from '../../datasources/config'
+import { getTcbInstance, getAccessToken } from '@cloudbase/weda-cloud-sdk/dist/h5';
+
+async function loginScope() {
+  const { auth } = await getTcbInstance();
+  return auth.loginScope();
+}
+
 export function getComponentId(key) {
   return `__weapps-component-wrapper-${key}`;
 }
@@ -77,7 +84,7 @@ export function resolveComponentProps(props, isPlainProps) {
       ...props,
     };
   }
-  const { data = {}, events = [], $node, ...restProps } = props;
+  const { data = {}, events = [], ...restProps } = props;
   const customProps = { ...data };
   const builtinProps = [
     // react 保留字
@@ -141,63 +148,159 @@ export function getStaticResourceAttribute(staticUrl) {
   }
   return staticUrl;
 }
+
+export function findLoginPage(app = window.app) {
+  const { pages = [] } = app.utils._getConfig();
+  return pages.find(item => item.type === 'login');
+}
+
+let _AUTH_CONFIG_CACHE = null;
+async function getAuthConfig(app = window.app) {
+  if (_AUTH_CONFIG_CACHE) {
+    return _AUTH_CONFIG_CACHE;
+  }
+  try {
+    const res = await app.cloud.callWedaApi({
+      action: "DescribeRuntimeResourceStrategy",
+      data: {
+        ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
+        ResourceId: app.id,
+      },
+    });
+    const settingData = {};
+    // 云api不支持map只能传字符串，需要转换
+    res.forEach((item) => {
+      settingData[item.Key] = ['AllowRegister', 'NeedLogin'].includes(item.Key) ? item.Value === '1' : item.Value;
+    });
+    _AUTH_CONFIG_CACHE = settingData;
+    return _AUTH_CONFIG_CACHE;
+  } catch (e) {
+    return {
+      NeedLogin: false,
+      RejectStrategy: "show_warning",
+    };
+  }
+}
+
+let _AUTH_CACHE_MAP = {}
+async function getAccessPermission(app, appId, pageId) {
+  const cacheKey = `${appId}-${pageId}`
+  if (_AUTH_CACHE_MAP[cacheKey] !== undefined) {
+    return _AUTH_CACHE_MAP[cacheKey];
+  }
+
+  let isAccess = false;
+  try {
+    const res = await app.cloud.callWedaApi({
+      action: 'DescribeResourcesPermission',
+      data: {
+        ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
+        ResourceIdList: [cacheKey],
+        AppResourceId: appId,
+      },
+    });
+    if (Array.isArray(res) && res.length > 0) {
+      isAccess = !!res[0].IsAccess;
+    }
+    _AUTH_CACHE_MAP[cacheKey] = isAccess;
+  } catch (e) {
+    console.warn('getAccessPermission', e);
+  }
+  return isAccess
+}
+
 /**
  * 检查页面权限
  **/
-const _AUTH_CACHE_MAP = {}
-export async function checkAuth(app, appId, pageId) {
-  <% if(isAdminPortal||isXPage){ %>return true;<% } %>
-  const cacheKey = `${appId}-${pageId}`
-  if(_AUTH_CACHE_MAP[cacheKey] !== undefined) {
-    return _AUTH_CACHE_MAP[cacheKey]
+export async function checkAuth(app, appId, $page) {
+  <% if (isAdminPortal || isXPage) { %>return true;<% } %>
+  const loginPage = findLoginPage(app);
+  if (loginPage?.id === $page.id) {
+    return true
   }
   app.showNavigationBarLoading();
-  const checkAuthResult = await app.cloud.callWedaApi({
-    action: 'DescribeResourcesPermission',
-    data: {
-      ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
-      ResourceIdList: [cacheKey],
-    },
-  });
-  let isLogin = false;
-  if (Array.isArray(checkAuthResult) && checkAuthResult.length > 0) {
-    isLogin = checkAuthResult[0]?.IsAccess ?? false;
+  const requestList = [getAccessPermission(app, appId, $page.id)];
+  // 暂时先认为有登录页则自定义登录功能开启且生效
+  if (loginPage) {
+    requestList.push(getAuthConfig(app));
   }
+  const [isAccess, authConfig] = await Promise.all(requestList);
   app.hideNavigationBarLoading();
 
-  if (!isLogin) {
+  if (!isAccess) {
+    if (loginPage && (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login')) {
+      redirectToLogin($page);
+    } else {
+      app.showToast({
+        title: '页面无访问权限',
+        icon: 'error',
+      });
+    }
+  } else if (loginPage && authConfig.NeedLogin) {
+    // 此分支逻辑本不应该前端判断是否登录，历史原因后端短期内搞不定，后续后端优化后删除
+    try {
+      const [scope, { accessToken }] = await Promise.all([loginScope(), getAccessToken()]);
+      if (!accessToken || scope === 'anonymous') {
+        redirectToLogin($page);
+      }
+    } catch (e) {
+      console.error('获取身份失败', e);
+      redirectToLogin($page);
+    }
+  }
+  return isAccess;
+}
+
+export function redirectToLogin(currentPage) {
+  // 去登录则清空权限缓存。
+  _AUTH_CACHE_MAP = {};
+  const app = window.app;
+  const loginPage = findLoginPage(app);
+  if (!currentPage) {
+    currentPage = app.utils.getCurrentPage() || {};
+  }
+  if (loginPage?.id === currentPage.id) {
+    return true
+  }
+  if (loginPage) {
+    app.redirectTo({
+      pageId: loginPage.id,
+      params: {
+        sourcePageId: currentPage.id,
+        sourcePageParams: currentPage.dataset.params
+      }
+    })
+  } else {
     app.showToast({
-      title: '页面无访问权限',
+      title: '用户未登录',
       icon: 'error',
     });
   }
-  _AUTH_CACHE_MAP[cacheKey] = isLogin
-  return isLogin;
 }
 
 const _REPORTED = {}
-export function reportTime(tag, time, only=false){
-  if(!window._aegis || !tag){
+export function reportTime(tag, time, only = false) {
+  if (!window._aegis || !tag) {
     return;
   }
-  if(window['_WedaHostConfig'] && !window['_WedaHostConfig']['_REPORTED']) {
+  if (window['_WedaHostConfig'] && !window['_WedaHostConfig']['_REPORTED']) {
     window['_WedaHostConfig']['_REPORTED'] = _REPORTED
   }
 
   const CACHE_MAP = window['_WedaHostConfig']?.['_REPORTED'] || _REPORTED
 
-  if(only && CACHE_MAP[tag]){
-    return ;
+  if (only && CACHE_MAP[tag]) {
+    return;
   }
   CACHE_MAP[tag] = true
   try {
-    let t = time === undefined? (performance?.now?.() || Date.now() - window['_aegis_inited']) :time;
+    let t = time === undefined ? (performance?.now?.() || Date.now() - window['_aegis_inited']) : time;
     window._aegis.reportTime({
       name: tag,
       duration: t,
-      ext2: config.isProd? 'production' : 'preview',
+      ext2: config.isProd ? 'production' : 'preview',
     })
-  }catch(e){
+  } catch (e) {
     console.log(e)
   }
 }

package/template/src/index.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { setConfig } from '@cloudbase/weda-cloud-sdk/dist/h5'
+import { setConfig, getAccessToken, initTcb } from '@cloudbase/weda-cloud-sdk/dist/h5'
 import App from './router'
 import './utils/monitor-jssdk.min'
 import './index.less'
@@ -12,6 +12,7 @@ import attachFastClick from 'fastclick'
 import { initWebConfig } from 'handlers/lifecycle'
 const AppConfig = require('../webpack/miniprogram.config')
 import { app } from './app/global-api'
+import { redirectToLogin, findLoginPage, getAuthConfig } from './handlers/utils'
 // app 中注册配置页面以及app的全局配置miniprogram.config，h5里分app以及web页分别处理，使用process.env.isApp 区分判断
 if (process.env.isApp) {
   initWebConfig(app, AppConfig);
@@ -23,12 +24,55 @@ setConfig({
     if (!cfg.options || !cfg.options.showLoading) return
     app.showLoading()
   },
+  beforeCallFunction: async (params) => {
+    try{
+      const loginPage = findLoginPage();
+
+      let skip = false;
+      switch (params?.data?.methodName) {
+        case 'callWedaApi': {
+          if(['GetMiniProgramUserTicket', 'DescribeRuntimeResourceStrategy'].includes(params?.data?.params.action)){
+            skip = true;
+          }
+          break;
+        }
+      }
+
+      // 后续做过滤处理
+      if (!loginPage || (params?.data?.mode === 'c' && skip)) {
+        return params;
+      }
+      const { accessToken } = await getAccessToken();
+      if (accessToken) {
+        params.data.accessToken = accessToken;
+      }
+    } catch (e) {
+      console.error('beforeCallFunction error', e);
+    }
+    return params;
+  },
   afterDSRequest: (cfg, error, result) => {
     if (!cfg.options) return
     if (cfg.options.showLoading) app.hideLoading()
     if (!cfg.options.showToast) return
     const isSuccess = !error && result && !result.code
     app.showToast({icon: isSuccess ? 'success' : 'error'})
+  },
+  async afterCallFunction(params, error, res) {
+    if(params?.data?.params?.action != 'DescribeRuntimeResourceStrategy' && ['InnerError.AuthFailure','InvalidAccessToken'].includes(res?.result?.code)) {
+      const loginPage = findLoginPage();
+      if (loginPage) {
+        const authConfig = await getAuthConfig();
+        if (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login') {
+          redirectToLogin();
+        } else if (authConfig.RejectStrategy == 'show_warning') {
+          app.showToast({
+            title: '接口无访问权限',
+            icon: 'error',
+          });
+        }
+      }
+    }
   }
 })
 // window.app.yyptReport = window.yyptReport

package/template/src/pages/app.tpl

@@ -78,24 +78,37 @@ initLifeCycle({
 export default function App() {
   // 检查权限
   const [weDaHasLogin, setWeDaHasLogin] = React.useState(false);
-  const dataContextRef =  React.useRef(observable({}))
-  const context = dataContextRef.current;
+  const context = React.useRef(observable({})).current;
   const containerRef = React.useRef(null);
   const microApp = React.useRef(null);
   const pureSrc = '<%= pageSource %>';
   const isPure = !!pureSrc;
 
-  React.useEffect(() => {
-    checkAuth(app, app.id, '<%= pageName %>').then((checkAuthResult) => {
-      setWeDaHasLogin(checkAuthResult)
-      reportTime('FIRST_PAGE_CONTENT_RENDERED', undefined, true)
-    });
+  /**
+   * 更新数据容器的上下文的方法
+   * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
+   * 当组件卸载时，传过来的data为undefined即可
+   * {
+   *   id1: [{...}],
+   *   id2: {...},
+   *   id3: undefined,
+   *   id4: null,
+   *   ...
+   * }
+   * @param id
+   * @param data
+   */
+  const updateContext = (id, data) => {
+    if (id) {
+      context[id] = { data };
+    }
+  }
 
+  React.useEffect(() => {
     Object.assign($page, {
       id: '<%= pageName %>',
       state: observable(initPageState),
       computed: createComputed(computed),
-      // _context: context,
       handler,
     });
 
@@ -107,6 +120,12 @@ export default function App() {
         app.utils.set($page.dataset.state, keyPath, userSetState[keyPath]);
       });
     };
+
+    checkAuth(app, app.id, $page).then((checkAuthResult) => {
+      setWeDaHasLogin(checkAuthResult)
+      reportTime('FIRST_PAGE_CONTENT_RENDERED', undefined, true)
+    });
+
     return () => {
       if (microApp.current) {
         microApp.current.unmount();
@@ -115,10 +134,10 @@ export default function App() {
   }, []);
 
   React.useEffect(() => {
-    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, dataContextRef.current);
+    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, context);
     // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
     retryDataBinds();
-  }, [dataContextRef.current]);
+  }, [context]);
 
   // Web 环境页面级别生命周期
   if (!process.env.isMiniprogram) {
@@ -160,27 +179,8 @@ export default function App() {
         <AppRender pageListenerInstances={pageListenerInstances}
           virtualFields={virtualFields}
           componentSchema={componentSchema}
-          context={dataContextRef.current}
-           /**
-            * 更新数据容器的上下文的方法
-            * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
-            * 当组件卸载时，传过来的data为undefined即可
-            * {
-            *   id1: [{...}],
-            *   id2: {...},
-            *   id3: undefined,
-            *   id4: null,
-            *   ...
-            * }
-            * @param id
-            * @param data
-            */
-          updateContext={(id, data) => {
-            if (id) {
-              dataContextRef.current[id] = { data };
-              // console.log('111', context[id])
-            }
-          }}
+          context={context}
+          updateContext={updateContext}
         />
       )}
     </div>

package/template/src/utils/formatEnum.js

@@ -1,42 +0,0 @@
-import { observable } from 'mobx';
-let loading = {};
-export let enumOptions = observable({});
-export function formatEnum(path, optionname) {
-  // 判断是单选还是多选
-  let isSingle = Array.isArray(path);
-  // 获取到options
-  let parseOptions = getEnumOptions(optionname);
-  if (parseOptions === '') {
-    return !isSingle ? path : path.join(',');
-  }
-  let multiTmp = [];
-  let value = !isSingle
-    ? JSON.parse(parseOptions)?.find((item) => item?.key === path)?.value
-    : JSON.parse(parseOptions)
-        ?.filter((item) => path.some((pathValue) => item?.key === pathValue))
-        .map((item) => multiTmp.push(item?.value));
-  // 对多选或者单选有不同处理
-  return !isSingle ? value : multiTmp?.join(',');
-}
-function getEnumOptions(optionName) {
-  if (enumOptions[optionName]) {
-    return enumOptions[optionName];
-  }
-  if (!loading[optionName]) {
-    loading[optionName] = true;
-    getGeneralOptions(optionName).then((data) => {
-      enumOptions[optionName] = data?.Items[0]?.Config;
-    });
-  }
-  return '';
-}
-export async function getGeneralOptions(optionName) {
-  return app.cloud.callWedaApi({
-    action: 'DescribeGeneralOptionsDetailList',
-    data: {
-      PageSize: 1,
-      PageIndex: 1,
-      LikeNameOrTitle: optionName,
-    },
-  });
-}