feat: 添加 login 插件

.eslintrc.js

@@ -8,12 +8,12 @@ module.exports = {
         __DEV__: false,
     },
     rules: {
-        'vue/comment-directive': 'off',
+        // 'vue/comment-directive': 'off',
-        'global-require': 'off',
+        // 'global-require': 'off',
-        'import/no-unresolved': 'off',
+        // 'import/no-unresolved': 'off',
-        'no-restricted-syntax': 'off',
+        // 'no-restricted-syntax': 'off',
-        'no-undefined': 'off',
+        // 'no-undefined': 'off',
-        'vue/valid-template-root': 'off',
+        // 'vue/valid-template-root': 'off',
     },
     env: {
         jest: true,

.prettierrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-    ...require("@webank/eslint-config-webank/.prettierrc.js"),
+    // eslint-disable-next-line import/no-extraneous-dependencies, import/extensions
+    ...require('@webank/eslint-config-webank/.prettierrc.js'),
 };

build.config.js

@@ -23,6 +23,7 @@ module.exports = {
         'fes-plugin-pinia',
         'fes-plugin-windicss',
         'fes-plugin-watermark',
+        'fes-plugin-login',
     ],
     copy: [],
 };

docs/reference/plugin/plugins/icon.md

@@ -3,15 +3,17 @@
 ## 介绍
 
 提供以 `component` 的方式，直接使用 svg icon 的能力。
+
 ## 启用方式
 
 在 `package.json` 中引入依赖：
+
 ```json
 {
     "dependencies": {
-        "@fesjs/fes": "^2.0.0",
+        "@fesjs/fes": "^3.0.0-rc.2",
-        "@fesjs/plugin-icon": "^2.0.0"
+        "@fesjs/plugin-icon": "^3.0.0-rc.2"
-    },
+    }
 }
 ```
 
@@ -26,7 +28,7 @@
 ### 属性
 
 | 属性   | 说明         | 类型      |
-| :-----| :---- | :---- |
+| :----- | :----------- | :-------- |
 | type   | svg 文件名   | `string`  |
 | spin   | 是否无限旋转 | `boolean` |
 | rotate | 旋转角度     | `number`  |

docs/reference/plugin/plugins/login.md

@@ -0,0 +1,34 @@
+# @fesjs/plugin-login
+
+## 介绍
+
+管理自定义 login 页面，包括 login 页面权限问题，跳转登陆问题。
+
+## 启用方式
+
+在 `package.json` 中引入依赖：
+
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^3.0.0-rc.2",
+        "@fesjs/plugin-login": "^3.0.0-rc.1"
+    }
+}
+```
+
+## 运行时配置
+
+```js
+import { defineRuntimeConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    login: {
+        loginPath: '/login', // 登陆页面路径，默认 /login，也可以用路由的 name
+        hasLogin() {
+            // 进入页面前判断是否登陆的逻辑，每次跳转非登陆页面都会检测，直到为 true，支持异步
+            return true;
+        },
+    },
+});
+```

package.json

@@ -39,11 +39,11 @@
         "@babel/preset-env": "^7.15.0",
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
+        "@vuepress/plugin-back-to-top": "2.0.0-beta.53",
         "@vuepress/plugin-docsearch": "2.0.0-beta.53",
         "@vuepress/plugin-pwa": "2.0.0-beta.53",
         "@vuepress/plugin-pwa-popup": "2.0.0-beta.53",
-    "@vuepress/plugin-back-to-top": "2.0.0-beta.53",
+        "@webank/eslint-config-webank": "1.2.7",
-    "@webank/eslint-config-webank": "^1.2.3",
         "chokidar": "^3.5.2",
         "commitizen": "^4.2.1",
         "cz-conventional-changelog": "^3.3.0",

packages/create-fes-app/templates/app/h5/package.json

@@ -40,7 +40,7 @@
         "access": "public"
     },
     "devDependencies": {
-    "@webank/eslint-config-webank": "^1.2.3",
+        "@webank/eslint-config-webank": "1.2.7",
         "@ttou/postcss-px-to-viewport": "1.1.1"
     },
     "dependencies": {

packages/create-fes-app/templates/app/pc/package.json

@@ -43,7 +43,7 @@
         "access": "public"
     },
     "devDependencies": {
-    "@webank/eslint-config-webank": "^1.2.3"
+        "@webank/eslint-config-webank": "1.2.7"
     },
     "dependencies": {
         "@fesjs/fes": "^3.0.0-rc.0",

packages/create-fes-app/templates/plugin/package.json.tpl

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
-    "@webank/eslint-config-webank": "^1.2.3",
+    "@webank/eslint-config-webank": "1.2.7",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.2",
     "deepmerge": "^4.2.2",

packages/fes-plugin-access/src/runtime/core.tpl

@@ -149,6 +149,7 @@ export const access = {
     isDataReady,
     setRole,
     setAccess,
+    match,
     getAccess: getAllowAccessIds,
 };
 

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

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/no-unresolved
 import { plugin, ApplyPluginsType } from '@@/core/coreExports';
-// eslint-disable-next-line import/extensions
+// eslint-disable-next-line import/extensions, import/no-unresolved
 import { access, install } from './core';
 
 export function onRouterCreated({ router }) {
@@ -20,6 +21,12 @@ export function onRouterCreated({ router }) {
             }
             return next(false);
         }
+        if (Array.isArray(runtimeConfig.ignoreAccess)) {
+            const isIgnored = await access.match(to.matched[to.matched.length - 1].path, runtimeConfig.ignoreAccess);
+            if (isIgnored) {
+                return next();
+            }
+        }
         // path是匹配路由的path，不是页面hash
         const canRoute = await access.hasAccess(to.matched[to.matched.length - 1].path);
         if (canRoute) {

packages/fes-plugin-login/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/fes-plugin-login/README.md

@@ -0,0 +1,104 @@
+# 痛点
+
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+
+-   搭建开发环境
+-   约定代码规范
+-   封装 API 请求
+-   配置路由
+-   实现布局、菜单、导航
+-   实现登录
+-   权限管理
+-   ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+## Fes.js 是什么？
+
+Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于 Vue.js3.0，充分利用 Vue 丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。
+
+它主要具备以下功能：
+
+-   🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
+-   🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
+
+-   💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
+
+-   📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
+
+-   📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 提升构建性能和实现微服务，未来会探索 vite 等新技术。
+
+## 插件
+
+| 插件                                                                                                                         | 介绍                                                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)                                        | 提供对页面资源的权限控制能力                                            |
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)                       | 提供统一的枚举存取及丰富的函数来处理枚举                                |
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)                         | svg 文件自动注册为组件                                                  |
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)       | 基于 `Jest`，提供单元测试、覆盖测试能力                                 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html)                                       | 简单的配置即可拥有布局，包括导航以及侧边栏                              |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D)                     | 基于 `Vue I18n`，提供国际化能力                                         |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D)                       | 简易的数据管理方案                                                      |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)       | 基于 `Vuex`, 提供状态管理能力                                           |
+| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D)                   | 基于 `qiankun`，提供微服务能力                                          |
+| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D)                         | 样式支持 sass                                                           |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D)              | 提供代码编辑器能力， 基于`monaco-editor`（VS Code 使用的代码编辑器）    |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html)                                    | 基于 `windicss`，提供原子化 CSS 能力                                    |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html)                                          | pinia，状态处理                                                         |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html)                                  | 水印                                                                    |
+
+## 像数 1, 2, 3 一样容易
+
+使用 `yarn`：
+
+```bash
+# 创建模板
+yarn create @fesjs/fes-app myapp
+
+# 安装依赖
+yarn
+
+# 运行
+yarn dev
+```
+
+使用 `npm`：
+
+```bash
+# 创建模板
+npx @fesjs/create-fes-app myapp
+
+# 安装依赖
+npm install
+
+# 运行
+npm run dev
+```
+
+## 反馈
+
+| Github Issue                         | 微信群                                                                      | Fes.js 开源运营小助手                                                       |
+| ------------------------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| [@fesjs/fes.js/issues](../../issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
+
+## 参与共建
+
+我们非常欢迎社区同学能提交 PR：
+
+1. fork 项目!
+2. 创建你的功能分支: `git checkout -b my-new-feature`
+3. 本地提交新代码: `git commit -am 'Add some feature'`
+4. 推送本地到服务器分支: `git push origin my-new-feature`
+5. 创建一个 PR
+
+如果是发现 Bug 或者期望添加新功能，请提交[issue](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g

packages/fes-plugin-login/build.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    copy: ['runtime'],
+};

packages/fes-plugin-login/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "@fesjs/plugin-login",
+    "version": "3.0.0-rc.1",
+    "description": "@fesjs/plugin-login",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-login"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "qlin",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "3.0.0-rc.2",
+        "@fesjs/plugin-request": "3.0.0-rc.6",
+        "vue": "^3.2.37"
+    },
+    "typings": "./types.d.ts"
+}

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

@@ -0,0 +1,25 @@
+import { join } from 'path';
+import { name } from '../package.json';
+
+export default (api) => {
+    api.addRuntimePluginKey(() => 'login');
+
+    const namespace = 'plugin-login';
+
+    const absRuntimeFilePath = `${namespace}/runtime.js`;
+    let generatedOnce = false;
+    api.onGenerateFiles(() => {
+        if (generatedOnce) return;
+        generatedOnce = true;
+        api.copyTmpFiles({
+            namespace,
+            path: join(__dirname, 'runtime'),
+        });
+    });
+
+    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
+
+    api.addConfigType(() => ({
+        source: name,
+    }));
+};

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

@@ -0,0 +1,55 @@
+import { ApplyPluginsType, getRouter, plugin } from '@fesjs/fes';
+
+let config;
+function getLoginConfig() {
+    if (config) return config;
+    config = plugin.applyPlugins({
+        key: 'login',
+        type: ApplyPluginsType.modify,
+        initialValue: {},
+    });
+    if (!config.loginPath) {
+        config.loginPath = '/login';
+    }
+    return config;
+}
+
+export function access(memo) {
+    const { loginPath } = getLoginConfig();
+    memo.ignoreAccess = (memo.ignoreAccess || []).concat(loginPath);
+    return memo;
+}
+
+export function request(memo) {
+    if (!memo.responseInterceptors) {
+        memo.responseInterceptors = [];
+    }
+    memo.responseInterceptors.push([
+        (response) => response,
+        (error) => {
+            if (error?.response?.status === 401) {
+                const router = getRouter();
+                const { loginPath } = getLoginConfig();
+                router.push({ path: loginPath });
+            }
+            throw error;
+        },
+    ]);
+    return memo;
+}
+
+export function onRouterCreated({ router }) {
+    const { hasLogin, loginPath } = getLoginConfig();
+    if (hasLogin && loginPath) {
+        let isAuthenticated;
+        router.beforeEach(async (to, from, next) => {
+            if (to.path !== loginPath && !isAuthenticated) {
+                isAuthenticated = await hasLogin();
+                if (!isAuthenticated) {
+                    return next({ path: loginPath });
+                }
+            }
+            next();
+        });
+    }
+}

packages/fes-plugin-login/types.d.ts

@@ -0,0 +1,10 @@
+import '@fesjs/fes';
+
+declare module '@fesjs/fes' {
+    interface PluginRuntimeConfig {
+        login?: {
+            loginPath?: string;
+            hasLogin?: () => boolean | Promise<boolean>;
+        };
+    }
+}

packages/fes-template/package.json

@@ -47,6 +47,7 @@
         "@fesjs/plugin-access": "^3.0.0-rc.0",
         "@fesjs/plugin-layout": "^5.0.0-rc.0",
         "@fesjs/plugin-locale": "^4.0.0-rc.0",
+        "@fesjs/plugin-login": "^3.0.0-rc.0",
         "@fesjs/plugin-model": "^3.0.0-rc.0",
         "@fesjs/plugin-enums": "^3.0.0-rc.0",
         "@fesjs/plugin-jest": "^2.0.0",

packages/fes-template/src/app.js

@@ -14,7 +14,7 @@ export const beforeRender = {
                 store.$patch({
                     userName: '李雷',
                 });
-                setRole('admin');
+                setRole('menuTest');
                 resolve({
                     userName: '李雷',
                 });
@@ -24,6 +24,12 @@ export const beforeRender = {
     },
 };
 
+export const login = {
+    hasLogin() {
+        return !!sessionStorage.getItem('login');
+    },
+};
+
 export const layout = (layoutConfig, { initialState }) => ({
     ...layoutConfig,
     renderCustom: () => <UserCenter />,

packages/fes-template/src/pages/@id/add.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>dyn router</div>
+</template>

packages/fes-template/src/pages/login.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="login">
+        <FButton type="primary" @click="login">登陆</FButton>
+    </div>
+</template>
+
+<script setup>
+import { defineRouteMeta, useRouter } from '@fesjs/fes';
+import { FButton } from '@fesjs/fes-design';
+
+const router = useRouter();
+const login = () => {
+    sessionStorage.setItem('login', true);
+    router.push({ name: 'index' });
+};
+
+defineRouteMeta({
+    name: 'login',
+    layout: {
+        navigation: null,
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+</style>