mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
feat: 添加 login 插件
This commit is contained in:
winixt
parent
937adce18a
commit
48d5f92ce7
12
.eslintrc.js
12
.eslintrc.js
@ -8,12 +8,12 @@ module.exports = {
|
|||||||
__DEV__: false,
|
__DEV__: false,
|
||||||
},
|
},
|
||||||
rules: {
|
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: {
|
env: {
|
||||||
jest: true,
|
jest: true,
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
module.exports = {
|
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'),
|
||||||
};
|
};
|
||||||
@ -23,6 +23,7 @@ module.exports = {
|
|||||||
'fes-plugin-pinia',
|
'fes-plugin-pinia',
|
||||||
'fes-plugin-windicss',
|
'fes-plugin-windicss',
|
||||||
'fes-plugin-watermark',
|
'fes-plugin-watermark',
|
||||||
|
'fes-plugin-login',
|
||||||
],
|
],
|
||||||
copy: [],
|
copy: [],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,15 +3,17 @@
|
|||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
提供以 `component` 的方式，直接使用 svg icon 的能力。
|
提供以 `component` 的方式，直接使用 svg icon 的能力。
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖：
|
在 `package.json` 中引入依赖：
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"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"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -25,8 +27,8 @@
|
|||||||
|
|
||||||
### 属性
|
### 属性
|
||||||
|
|
||||||
| 属性 | 说明 | 类型 |
|
| 属性 | 说明 | 类型 |
|
||||||
| :-----| :---- | :---- |
|
| :----- | :----------- | :-------- |
|
||||||
| type | svg 文件名 | `string` |
|
| type | svg 文件名 | `string` |
|
||||||
| spin | 是否无限旋转 | `boolean` |
|
| spin | 是否无限旋转 | `boolean` |
|
||||||
| rotate | 旋转角度 | `number` |
|
| rotate | 旋转角度 | `number` |
|
||||||
|
|||||||
34
docs/reference/plugin/plugins/login.md
Normal file
34
docs/reference/plugin/plugins/login.md
Normal file
@ -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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
142
package.json
142
package.json
@ -1,74 +1,74 @@
|
|||||||
{
|
{
|
||||||
"name": "fes.js",
|
"name": "fes.js",
|
||||||
"version": "3.0.0-rc.7",
|
"version": "3.0.0-rc.7",
|
||||||
"description": "一个好用的前端管理台快速开发框架",
|
"description": "一个好用的前端管理台快速开发框架",
|
||||||
"preferGlobal": true,
|
"preferGlobal": true,
|
||||||
"private": true,
|
"private": true,
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*"
|
"packages/*"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node scripts/build.mjs --watch",
|
"dev": "node scripts/build.mjs --watch",
|
||||||
"build": "node scripts/build.mjs",
|
"build": "node scripts/build.mjs",
|
||||||
"release": "node scripts/release.mjs",
|
"release": "node scripts/release.mjs",
|
||||||
"docs:dev": "vuepress dev docs --clean-cache",
|
"docs:dev": "vuepress dev docs --clean-cache",
|
||||||
"docs:build": "vuepress build docs --clean-cache",
|
"docs:build": "vuepress build docs --clean-cache",
|
||||||
"test": "fes test",
|
"test": "fes test",
|
||||||
"lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
|
"lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
|
||||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"管理端",
|
"管理端",
|
||||||
"fes",
|
"fes",
|
||||||
"fast",
|
"fast",
|
||||||
"easy",
|
"easy",
|
||||||
"strong"
|
"strong"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chalk": "^5.0.1",
|
"chalk": "^5.0.1",
|
||||||
"conventional-changelog-cli": "^2.2.2",
|
"conventional-changelog-cli": "^2.2.2",
|
||||||
"enquirer": "^2.3.6",
|
"enquirer": "^2.3.6",
|
||||||
"execa": "^6.1.0",
|
"execa": "^6.1.0",
|
||||||
"minimist": "^1.2.6",
|
"minimist": "^1.2.6",
|
||||||
"semver": "^7.3.6",
|
"semver": "^7.3.6",
|
||||||
"vuepress": "2.0.0-beta.53"
|
"vuepress": "2.0.0-beta.53"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.15.0",
|
"@babel/core": "^7.15.0",
|
||||||
"@babel/preset-env": "^7.15.0",
|
"@babel/preset-env": "^7.15.0",
|
||||||
"@commitlint/cli": "^11.0.0",
|
"@commitlint/cli": "^11.0.0",
|
||||||
"@commitlint/config-conventional": "^11.0.0",
|
"@commitlint/config-conventional": "^11.0.0",
|
||||||
"@vuepress/plugin-docsearch": "2.0.0-beta.53",
|
"@vuepress/plugin-back-to-top": "2.0.0-beta.53",
|
||||||
"@vuepress/plugin-pwa": "2.0.0-beta.53",
|
"@vuepress/plugin-docsearch": "2.0.0-beta.53",
|
||||||
"@vuepress/plugin-pwa-popup": "2.0.0-beta.53",
|
"@vuepress/plugin-pwa": "2.0.0-beta.53",
|
||||||
"@vuepress/plugin-back-to-top": "2.0.0-beta.53",
|
"@vuepress/plugin-pwa-popup": "2.0.0-beta.53",
|
||||||
"@webank/eslint-config-webank": "^1.2.3",
|
"@webank/eslint-config-webank": "1.2.7",
|
||||||
"chokidar": "^3.5.2",
|
"chokidar": "^3.5.2",
|
||||||
"commitizen": "^4.2.1",
|
"commitizen": "^4.2.1",
|
||||||
"cz-conventional-changelog": "^3.3.0",
|
"cz-conventional-changelog": "^3.3.0",
|
||||||
"deepmerge": "^4.2.2",
|
"deepmerge": "^4.2.2",
|
||||||
"fs-extra": "^10.0.0",
|
"fs-extra": "^10.0.0",
|
||||||
"husky": "^4.3.0",
|
"husky": "^4.3.0",
|
||||||
"lint-staged": "^10.4.0",
|
"lint-staged": "^10.4.0",
|
||||||
"postcss": "^8.0.0",
|
"postcss": "^8.0.0",
|
||||||
"postcss-loader": "^5.0.0",
|
"postcss-loader": "^5.0.0",
|
||||||
"yargs-parser": "^20.2.9"
|
"yargs-parser": "^20.2.9"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{js,jsx,vue,ts}": [
|
"*.{js,jsx,vue,ts}": [
|
||||||
"npm run lint"
|
"npm run lint"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
"pre-commit": "lint-staged",
|
"pre-commit": "lint-staged",
|
||||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"config": {
|
||||||
|
"commitizen": {
|
||||||
|
"path": "./node_modules/cz-conventional-changelog"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"config": {
|
|
||||||
"commitizen": {
|
|
||||||
"path": "./node_modules/cz-conventional-changelog"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,55 +1,55 @@
|
|||||||
{
|
{
|
||||||
"name": "@fesjs/template-h5",
|
"name": "@fesjs/template-h5",
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"description": "fes 移动端项目模版",
|
"description": "fes 移动端项目模版",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "fes build",
|
"build": "fes build",
|
||||||
"dev": "fes dev"
|
"dev": "fes dev"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"管理端",
|
"管理端",
|
||||||
"fes",
|
"fes",
|
||||||
"fast",
|
"fast",
|
||||||
"easy",
|
"easy",
|
||||||
"strong"
|
"strong"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
".eslintrc.js",
|
".eslintrc.js",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".fes.js",
|
".fes.js",
|
||||||
".fes.prod.js",
|
".fes.prod.js",
|
||||||
"mock.js",
|
"mock.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"README.md",
|
"README.md",
|
||||||
"tsconfig.json",
|
"tsconfig.json",
|
||||||
"/src",
|
"/src",
|
||||||
"/config"
|
"/config"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||||
"directory": "packages/fes-template-h5"
|
"directory": "packages/fes-template-h5"
|
||||||
},
|
},
|
||||||
"author": "qlin",
|
"author": "qlin",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@webank/eslint-config-webank": "^1.2.3",
|
"@webank/eslint-config-webank": "1.2.7",
|
||||||
"@ttou/postcss-px-to-viewport": "1.1.1"
|
"@ttou/postcss-px-to-viewport": "1.1.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-rc.1",
|
"@fesjs/fes": "^3.0.0-rc.1",
|
||||||
"@fesjs/plugin-icon": "^3.0.0-rc.0",
|
"@fesjs/plugin-icon": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-request": "^3.0.0-rc.3",
|
"@fesjs/plugin-request": "^3.0.0-rc.3",
|
||||||
"@fesjs/builder-webpack": "^3.0.0-rc.1",
|
"@fesjs/builder-webpack": "^3.0.0-rc.1",
|
||||||
"vue": "^3.2.37",
|
"vue": "^3.2.37",
|
||||||
"core-js": "^3.27.0"
|
"core-js": "^3.27.0"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
@ -1,60 +1,60 @@
|
|||||||
{
|
{
|
||||||
"name": "@fesjs/template",
|
"name": "@fesjs/template",
|
||||||
"version": "3.0.0-beta.0",
|
"version": "3.0.0-beta.0",
|
||||||
"description": "fes项目模版",
|
"description": "fes项目模版",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "fes build",
|
"build": "fes build",
|
||||||
"prod": "FES_ENV=prod fes build",
|
"prod": "FES_ENV=prod fes build",
|
||||||
"analyze": "ANALYZE=1 fes build",
|
"analyze": "ANALYZE=1 fes build",
|
||||||
"dev": "fes dev",
|
"dev": "fes dev",
|
||||||
"test:unit": "fes test:unit"
|
"test:unit": "fes test:unit"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"管理端",
|
"管理端",
|
||||||
"fes",
|
"fes",
|
||||||
"fast",
|
"fast",
|
||||||
"easy",
|
"easy",
|
||||||
"strong"
|
"strong"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
".eslintrc.js",
|
".eslintrc.js",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".fes.js",
|
".fes.js",
|
||||||
".fes.prod.js",
|
".fes.prod.js",
|
||||||
"mock.js",
|
"mock.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"README.md",
|
"README.md",
|
||||||
"tsconfig.json",
|
"tsconfig.json",
|
||||||
"/src",
|
"/src",
|
||||||
"/config"
|
"/config"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||||
"directory": "packages/fes-template"
|
"directory": "packages/fes-template"
|
||||||
},
|
},
|
||||||
"author": "harrywan",
|
"author": "harrywan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@webank/eslint-config-webank": "^1.2.3"
|
"@webank/eslint-config-webank": "1.2.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-rc.0",
|
"@fesjs/fes": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||||
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||||
"@fesjs/fes-design": "^0.7.9",
|
"@fesjs/fes-design": "^0.7.9",
|
||||||
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
"core-js": "^3.27.0"
|
"core-js": "^3.27.0"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
@ -21,7 +21,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.15.0",
|
"@babel/core": "^7.15.0",
|
||||||
"@babel/preset-env": "^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",
|
"chalk": "^4.1.2",
|
||||||
"chokidar": "^3.5.2",
|
"chokidar": "^3.5.2",
|
||||||
"deepmerge": "^4.2.2",
|
"deepmerge": "^4.2.2",
|
||||||
|
|||||||
@ -149,6 +149,7 @@ export const access = {
|
|||||||
isDataReady,
|
isDataReady,
|
||||||
setRole,
|
setRole,
|
||||||
setAccess,
|
setAccess,
|
||||||
|
match,
|
||||||
getAccess: getAllowAccessIds,
|
getAccess: getAllowAccessIds,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
|
// eslint-disable-next-line import/no-unresolved
|
||||||
import { plugin, ApplyPluginsType } from '@@/core/coreExports';
|
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';
|
import { access, install } from './core';
|
||||||
|
|
||||||
export function onRouterCreated({ router }) {
|
export function onRouterCreated({ router }) {
|
||||||
@ -20,6 +21,12 @@ export function onRouterCreated({ router }) {
|
|||||||
}
|
}
|
||||||
return next(false);
|
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
|
// path是匹配路由的path，不是页面hash
|
||||||
const canRoute = await access.hasAccess(to.matched[to.matched.length - 1].path);
|
const canRoute = await access.hasAccess(to.matched[to.matched.length - 1].path);
|
||||||
if (canRoute) {
|
if (canRoute) {
|
||||||
|
|||||||
21
packages/fes-plugin-login/LICENSE
Normal file
21
packages/fes-plugin-login/LICENSE
Normal file
@ -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.
|
||||||
104
packages/fes-plugin-login/README.md
Normal file
104
packages/fes-plugin-login/README.md
Normal file
@ -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
|
||||||
3
packages/fes-plugin-login/build.config.js
Normal file
3
packages/fes-plugin-login/build.config.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
copy: ['runtime'],
|
||||||
|
};
|
||||||
36
packages/fes-plugin-login/package.json
Normal file
36
packages/fes-plugin-login/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
25
packages/fes-plugin-login/src/index.js
Normal file
25
packages/fes-plugin-login/src/index.js
Normal file
@ -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,
|
||||||
|
}));
|
||||||
|
};
|
||||||
55
packages/fes-plugin-login/src/runtime/runtime.js
Normal file
55
packages/fes-plugin-login/src/runtime/runtime.js
Normal file
@ -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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
10
packages/fes-plugin-login/types.d.ts
vendored
Normal file
10
packages/fes-plugin-login/types.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import '@fesjs/fes';
|
||||||
|
|
||||||
|
declare module '@fesjs/fes' {
|
||||||
|
interface PluginRuntimeConfig {
|
||||||
|
login?: {
|
||||||
|
loginPath?: string;
|
||||||
|
hasLogin?: () => boolean | Promise<boolean>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,68 +1,69 @@
|
|||||||
{
|
{
|
||||||
"name": "@fesjs/template",
|
"name": "@fesjs/template",
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"description": "fes项目模版",
|
"description": "fes项目模版",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "fes build",
|
"build": "fes build",
|
||||||
"prod": "FES_ENV=prod fes build",
|
"prod": "FES_ENV=prod fes build",
|
||||||
"analyze": "ANALYZE=1 fes build",
|
"analyze": "ANALYZE=1 fes build",
|
||||||
"dev": "fes dev",
|
"dev": "fes dev",
|
||||||
"test": "fes test"
|
"test": "fes test"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"管理端",
|
"管理端",
|
||||||
"fes",
|
"fes",
|
||||||
"fast",
|
"fast",
|
||||||
"easy",
|
"easy",
|
||||||
"strong"
|
"strong"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
".eslintrc.js",
|
".eslintrc.js",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".fes.js",
|
".fes.js",
|
||||||
".fes.prod.js",
|
".fes.prod.js",
|
||||||
"mock.js",
|
"mock.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"README.md",
|
"README.md",
|
||||||
"tsconfig.json",
|
"tsconfig.json",
|
||||||
"/src",
|
"/src",
|
||||||
"/config"
|
"/config"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||||
"directory": "packages/fes-template"
|
"directory": "packages/fes-template"
|
||||||
},
|
},
|
||||||
"author": "harrywan",
|
"author": "harrywan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-rc.0",
|
"@fesjs/fes": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||||
"@fesjs/plugin-locale": "^4.0.0-rc.0",
|
"@fesjs/plugin-locale": "^4.0.0-rc.0",
|
||||||
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
"@fesjs/plugin-login": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-jest": "^2.0.0",
|
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-vuex": "^3.0.0-rc.0",
|
"@fesjs/plugin-jest": "^2.0.0",
|
||||||
"@fesjs/plugin-request": "^3.0.0-rc.0",
|
"@fesjs/plugin-vuex": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-qiankun": "^3.0.0-rc.0",
|
"@fesjs/plugin-request": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-sass": "^3.0.0-rc.0",
|
"@fesjs/plugin-qiankun": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-monaco-editor": "^3.0.0-rc.0",
|
"@fesjs/plugin-sass": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-windicss": "^3.0.0-rc.0",
|
"@fesjs/plugin-monaco-editor": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-pinia": "^3.0.0-rc.0",
|
"@fesjs/plugin-windicss": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-watermark": "^3.0.0-rc.0",
|
"@fesjs/plugin-pinia": "^3.0.0-rc.0",
|
||||||
"@fesjs/fes-design": "^0.7.0",
|
"@fesjs/plugin-watermark": "^3.0.0-rc.0",
|
||||||
"core-js": "^3.27.0",
|
"@fesjs/fes-design": "^0.7.0",
|
||||||
"vue": "^3.2.37",
|
"core-js": "^3.27.0",
|
||||||
"vuex": "^4.0.0",
|
"vue": "^3.2.37",
|
||||||
"pinia": "^2.0.11"
|
"vuex": "^4.0.0",
|
||||||
},
|
"pinia": "^2.0.11"
|
||||||
"private": true
|
},
|
||||||
|
"private": true
|
||||||
}
|
}
|
||||||
@ -14,7 +14,7 @@ export const beforeRender = {
|
|||||||
store.$patch({
|
store.$patch({
|
||||||
userName: '李雷',
|
userName: '李雷',
|
||||||
});
|
});
|
||||||
setRole('admin');
|
setRole('menuTest');
|
||||||
resolve({
|
resolve({
|
||||||
userName: '李雷',
|
userName: '李雷',
|
||||||
});
|
});
|
||||||
@ -24,6 +24,12 @@ export const beforeRender = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const login = {
|
||||||
|
hasLogin() {
|
||||||
|
return !!sessionStorage.getItem('login');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export const layout = (layoutConfig, { initialState }) => ({
|
export const layout = (layoutConfig, { initialState }) => ({
|
||||||
...layoutConfig,
|
...layoutConfig,
|
||||||
renderCustom: () => <UserCenter />,
|
renderCustom: () => <UserCenter />,
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<div>dyn router</div>
|
||||||
|
</template>
|
||||||
32
packages/fes-template/src/pages/login.vue
Normal file
32
packages/fes-template/src/pages/login.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user