feat: plugin-layout内置403和404功能

packages/fes-plugin-layout/src/index.js

@@ -23,6 +23,8 @@ export default (api) => {
 
     const absFilePath = join(namespace, 'index.js');
 
+    const absRuntimeFilePath = join(namespace, 'runtime.js');
+
     api.onGenerateFiles(() => {
         const { name } = api.pkg;
 
@@ -53,6 +55,7 @@ export default (api) => {
         });
     });
 
+    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 
     // 把BaseLayout插入到路由配置中，作为根路由
     api.modifyRoutes(routes => [

packages/fes-plugin-layout/src/runtime/helpers/index.js

@@ -27,7 +27,7 @@ const matchPath = (config, path) => {
         for (let i = 0; i < config.length; i++) {
             const item = config[i];
             if (item.path && item.path === path) {
-                res = item.meta;
+                res = item.meta || {};
                 res.path = item.path;
                 break;
             }

packages/fes-plugin-layout/src/runtime/runtime.js

@@ -0,0 +1,69 @@
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
+import { access as accessApi } from '../plugin-access/core';
+import Exception404 from './views/404';
+import Exception403 from './views/403';
+
+if (!accessApi) {
+    throw new Error(
+        '[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！'
+    );
+}
+
+const handle = (type, router) => {
+    const accesssIds = accessApi.getAccess();
+    const path = `/${type}`;
+    const name = `Exception${type}`;
+    const components = {
+        404: Exception404,
+        403: Exception403
+    };
+    if (!accesssIds.includes(path)) {
+        accessApi.setAccess(accesssIds.concat([path]));
+    }
+    if (!router.hasRoute(name)) {
+        router.addRoute({ path, name, component: components[type] });
+    }
+};
+
+export const access = {
+    unAccessHandler({
+        router, to, from, next
+    }) {
+        const runtimeConfig = plugin.applyPlugins({
+            key: 'layout',
+            type: ApplyPluginsType.modify,
+            initialValue: {}
+        });
+        if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
+            return runtimeConfig.unAccessHandler({
+                router, to, from, next
+            });
+        }
+        if (to.path === '/404') {
+            handle(404, router);
+            return next('/404');
+        }
+        handle(403, router);
+        next('/403');
+    },
+    noFoundHandler({
+        router, to, from, next
+    }) {
+        const runtimeConfig = plugin.applyPlugins({
+            key: 'layout',
+            type: ApplyPluginsType.modify,
+            initialValue: {}
+        });
+        if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
+            return runtimeConfig.noFoundHandler({
+                router, to, from, next
+            });
+        }
+        if (to.path === '/403') {
+            handle(403, router);
+            return next('/403');
+        }
+        handle(404, router);
+        next('/404');
+    }
+};

packages/fes-plugin-layout/src/runtime/views/403.vue

@@ -1,7 +1,7 @@
 <template>
-    <a-result status="403" title="403" sub-title="Sorry, you are not authorized to access this page.">
+    <a-result status="403" title="403" sub-title="对不起，您没有权限访问此页面。">
         <template #extra>
-            <a-button type="primary">上一页</a-button>
+            <a-button type="primary" @click="click">上一页</a-button>
         </template>
     </a-result>
 </template>
@@ -11,6 +11,7 @@
 }
 </config>
 <script>
+import { useRouter } from '@@/core/coreExports';
 import Result from 'ant-design-vue/lib/result';
 import 'ant-design-vue/lib/result/style';
 import Button from 'ant-design-vue/lib/button';
@@ -20,6 +21,15 @@ export default {
     components: {
         [Result.name]: Result,
         [Button.name]: Button
+    },
+    setup() {
+        const router = useRouter();
+        const click = () => {
+            router.back();
+        };
+        return {
+            click
+        };
     }
 };
 </script>

packages/fes-plugin-layout/src/runtime/views/404.vue

@@ -1,7 +1,7 @@
 <template>
-    <a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
+    <a-result status="404" title="404" sub-title="对不起，您访问的页面不存在。">
         <template #extra>
-            <a-button type="primary">上一页</a-button>
+            <a-button type="primary" @click="click">上一页</a-button>
         </template>
     </a-result>
 </template>
@@ -11,6 +11,7 @@
 }
 </config>
 <script>
+import { useRouter } from '@@/core/coreExports';
 import Result from 'ant-design-vue/lib/result';
 import 'ant-design-vue/lib/result/style';
 import Button from 'ant-design-vue/lib/button';
@@ -20,6 +21,15 @@ export default {
     components: {
         [Result.name]: Result,
         [Button.name]: Button
+    },
+    setup() {
+        const router = useRouter();
+        const click = () => {
+            router.back();
+        };
+        return {
+            click
+        };
     }
 };
 </script>

packages/fes-template/src/app.js

@@ -21,25 +21,10 @@ export const beforeRender = {
 
 export const layout = {
     customHeader: <UserCenter />
-};
+    // unAccessHandler({ next }) {
-
+    //     next(false);
-export const access = {
+    // },
-    unAccessHandler({ to, next }) {
+    // noFoundHandler({ next }) {
-        const accesssIds = accessApi.getAccess();
+    //     next(false);
-        if (to.path === '/404') {
+    // }
-            accessApi.setAccess(accesssIds.concat(['/404']));
-            return next('/404');
-        }
-        if (!accesssIds.includes('/403')) {
-            accessApi.setAccess(accesssIds.concat(['/403']));
-        }
-        next('/403');
-    },
-    noFoundHandler({ next }) {
-        const accesssIds = accessApi.getAccess();
-        if (!accesssIds.includes('/404')) {
-            accessApi.setAccess(accesssIds.concat(['/404']));
-        }
-        next('/404');
-    }
 };