mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 03:05:07 +08:00
feat: 添加 login 插件 (#168)
* feat: 添加 login 插件 * docs: 优化 access docs 文档 * refactor: beforeRender迁移到router创建后 * fix: 修复清除webpack-cache问题 * refactor: 优化 plugin 插件 Co-authored-by: wanchun <445436867@qq.com>
This commit is contained in:
qlin
GitHub
parent
2ede8a5c11
commit
b0797260fc
@ -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'),
|
||||
};
|
||||
|
||||
@ -23,6 +23,7 @@ module.exports = {
|
||||
'fes-plugin-pinia',
|
||||
'fes-plugin-windicss',
|
||||
'fes-plugin-watermark',
|
||||
'fes-plugin-login',
|
||||
],
|
||||
copy: [],
|
||||
};
|
||||
|
||||
@ -1,82 +1,67 @@
|
||||
import type { SidebarConfig } from '@vuepress/theme-default'
|
||||
import type { SidebarConfig } from '@vuepress/theme-default';
|
||||
|
||||
export const zh: SidebarConfig = {
|
||||
'/guide/': [
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '介绍',
|
||||
children: [
|
||||
'/guide/README.md',
|
||||
'/guide/getting-started.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '基础',
|
||||
children: [
|
||||
'/guide/directory-structure.md',
|
||||
'/guide/builder.md',
|
||||
'/guide/config.md',
|
||||
'/guide/runtime-config.md',
|
||||
'/guide/env.md',
|
||||
'/guide/route.md',
|
||||
'/guide/plugin.md',
|
||||
'/guide/template.md',
|
||||
'/guide/mock.md',
|
||||
'/guide/upgrade3.md',
|
||||
]
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '样式和资源文件',
|
||||
children: [
|
||||
'/guide/image.md',
|
||||
'/guide/css.md',
|
||||
'/guide/public.md',
|
||||
]
|
||||
},
|
||||
"/guide/contributing.md",
|
||||
"/guide/faq.md"
|
||||
],
|
||||
'/reference/config/': [
|
||||
'/reference/config/README.md'
|
||||
],
|
||||
'/reference/api/': [
|
||||
'/reference/api/README.md'
|
||||
],
|
||||
'/reference/plugin/': [
|
||||
'/reference/plugin/README.md',
|
||||
{
|
||||
// isGroup: true,
|
||||
text: 'Plugins',
|
||||
children: [
|
||||
'/reference/plugin/plugins/access.md',
|
||||
'/reference/plugin/plugins/enums.md',
|
||||
'/reference/plugin/plugins/icon.md',
|
||||
'/reference/plugin/plugins/jest.md',
|
||||
'/reference/plugin/plugins/layout.md',
|
||||
'/reference/plugin/plugins/locale.md',
|
||||
'/reference/plugin/plugins/model.md',
|
||||
'/reference/plugin/plugins/request.md',
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/windicss.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
'/reference/plugin/plugins/pinia.md',
|
||||
'/reference/plugin/plugins/watermark.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '插件开发',
|
||||
children: [
|
||||
'/reference/plugin/dev/README.md',
|
||||
'/reference/plugin/dev/api.md'
|
||||
],
|
||||
},
|
||||
],
|
||||
'/reference/cli/': [
|
||||
'/reference/cli/README.md',
|
||||
],
|
||||
}
|
||||
'/guide/': [
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '介绍',
|
||||
children: ['/guide/README.md', '/guide/getting-started.md'],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '基础',
|
||||
children: [
|
||||
'/guide/directory-structure.md',
|
||||
'/guide/builder.md',
|
||||
'/guide/config.md',
|
||||
'/guide/runtime-config.md',
|
||||
'/guide/env.md',
|
||||
'/guide/route.md',
|
||||
'/guide/plugin.md',
|
||||
'/guide/template.md',
|
||||
'/guide/mock.md',
|
||||
'/guide/upgrade3.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '样式和资源文件',
|
||||
children: ['/guide/image.md', '/guide/css.md', '/guide/public.md'],
|
||||
},
|
||||
'/guide/contributing.md',
|
||||
'/guide/faq.md',
|
||||
],
|
||||
'/reference/config/': ['/reference/config/README.md'],
|
||||
'/reference/api/': ['/reference/api/README.md'],
|
||||
'/reference/plugin/': [
|
||||
'/reference/plugin/README.md',
|
||||
{
|
||||
// isGroup: true,
|
||||
text: 'Plugins',
|
||||
children: [
|
||||
'/reference/plugin/plugins/access.md',
|
||||
'/reference/plugin/plugins/enums.md',
|
||||
'/reference/plugin/plugins/icon.md',
|
||||
'/reference/plugin/plugins/jest.md',
|
||||
'/reference/plugin/plugins/layout.md',
|
||||
'/reference/plugin/plugins/locale.md',
|
||||
'/reference/plugin/plugins/model.md',
|
||||
'/reference/plugin/plugins/request.md',
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/windicss.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
'/reference/plugin/plugins/pinia.md',
|
||||
'/reference/plugin/plugins/watermark.md',
|
||||
'/reference/plugin/plugins/login.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
// isGroup: true,
|
||||
text: '插件开发',
|
||||
children: ['/reference/plugin/dev/README.md', '/reference/plugin/dev/api.md'],
|
||||
},
|
||||
],
|
||||
'/reference/cli/': ['/reference/cli/README.md'],
|
||||
};
|
||||
|
||||
@ -1,114 +1,126 @@
|
||||
# @fesjs/plugin-access
|
||||
|
||||
## 介绍
|
||||
|
||||
对于前端应用来说，权限就是页面、页面元素是否可见。
|
||||
|
||||
### 资源
|
||||
|
||||
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
|
||||
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
|
||||
|
||||
- 页面元素的资源 ID 没有默认值，需要自定义。
|
||||
|
||||
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
|
||||
- 页面元素的资源 ID 没有默认值，需要自定义。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<access :id="accessId"> accessOnepicess1 </access>
|
||||
<div v-access="accessId"> accessOnepicess2 </div>
|
||||
<div v-access="accessId">accessOnepicess2</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### 匹配规则
|
||||
|
||||
#### 全等匹配
|
||||
资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源ID。如果我们设置：
|
||||
|
||||
资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源 ID。如果我们设置：
|
||||
|
||||
```js
|
||||
access.setAccess(['/a'])
|
||||
access.setAccess(['/a']);
|
||||
```
|
||||
|
||||
由于权限列表中包含`/a`，则表示拥有此页面权限。
|
||||
|
||||
#### 模糊匹配
|
||||
|
||||
页面`@id.vue`会映射为动态路由`/:id`，想匹配此页面有两种办法：
|
||||
- **access.setAccess(['/:id'])**
|
||||
- **access.setAccess(['/*'])**
|
||||
|
||||
- **access.setAccess(['/:id'])**
|
||||
- **access.setAccess(['/*'])**
|
||||
|
||||
第二种是模糊匹配，`*`表示任意路径。比如角色`admin`需要全部权限，则可以：
|
||||
|
||||
```js
|
||||
export default {
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
admin: ['*'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### 角色
|
||||
通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
|
||||
|
||||
通常我们会用角色来控制权限，相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
|
||||
|
||||
当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。
|
||||
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-access": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 编译时配置
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
```js
|
||||
export default {
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["/", "/onepiece", '/store']
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 编译时配置
|
||||
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
access: {
|
||||
roles: {
|
||||
admin: ['/', '/onepiece', '/store'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### roles
|
||||
- **类型**：对象
|
||||
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：
|
||||
|
||||
角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
|
||||
- **类型**：对象
|
||||
- **默认值**：`{}`
|
||||
|
||||
- **详情**：
|
||||
|
||||
角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
|
||||
|
||||
## 运行时配置
|
||||
|
||||
在 `app.js` 中配置
|
||||
|
||||
### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`Function`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
|
||||
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
unAccessHandler({ to, next }) {
|
||||
@ -121,26 +133,27 @@ export const access = {
|
||||
accessApi.setAccess(accesssIds.concat(['/403']));
|
||||
}
|
||||
next('/403');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### noFoundHandler
|
||||
- **类型**：`Function`
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
- **类型**：`Function`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
|
||||
|
||||
- **参数**
|
||||
- router：createRouter 创建的路由实例
|
||||
- to： 准备进入的路由
|
||||
- from：离开的路由
|
||||
- next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
noFoundHandler({ next }) {
|
||||
@ -149,69 +162,90 @@ export const access = {
|
||||
accessApi.setAccess(accesssIds.concat(['/404']));
|
||||
}
|
||||
next('/404');
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### ignoreAccess
|
||||
|
||||
- **类型**：`Array<string>`
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：
|
||||
|
||||
配置需要忽略权限校验的页面。
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
export const access = {
|
||||
ignoreAccess: ['/login'],
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### access
|
||||
|
||||
插件 API 通过 `@fesjs/fes` 导出：
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes'
|
||||
import { access } from '@fesjs/fes';
|
||||
```
|
||||
|
||||
#### access.hasAccess
|
||||
- **类型**：( accessId: string | number ) => Promise\<boolean\>
|
||||
|
||||
- **详情**: 判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源Id
|
||||
- **返回值**：是否有权限
|
||||
|
||||
- **类型**：( accessId: string | number ) => Promise\<boolean\>
|
||||
- **详情**: 判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源 Id
|
||||
- **返回值**：是否有权限
|
||||
|
||||
#### access.isDataReady
|
||||
- **类型**：() => boolean
|
||||
|
||||
- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
|
||||
- **参数**：null
|
||||
- **返回值**：Boolean
|
||||
|
||||
- **类型**：() => boolean
|
||||
- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
|
||||
- **参数**：null
|
||||
- **返回值**：Boolean
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
console.log(access.isDataReady())
|
||||
console.log(access.isDataReady());
|
||||
```
|
||||
|
||||
#### access.setRole
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- roleId，角色Id，有两种类型：
|
||||
- String，对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- roleId，角色 Id，有两种类型：
|
||||
- String，对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
access.setRole('admin')
|
||||
access.setRole('admin');
|
||||
```
|
||||
|
||||
#### access.setAccess
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- accessIds，资源Id数组，有两种类型：
|
||||
- Array，数组项对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应该是`Array<accessId>`。
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：设置当前的角色。
|
||||
- **参数**：
|
||||
- accessIds，资源 Id 数组，有两种类型：
|
||||
- Array，数组项对应着 `roles` 配置对象中的 `key`。
|
||||
- Promise，Promise resolve 的结果应该是`Array<accessId>`。
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
access.setAccess(['/a', '/b', '/c'])
|
||||
access.setAccess(['/a', '/b', '/c']);
|
||||
```
|
||||
|
||||
#### access.getAccess
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：返回当前可见的资源列表。
|
||||
- **参数**：null
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**：返回当前可见的资源列表。
|
||||
- **参数**：null
|
||||
|
||||
```js
|
||||
import { access } from '@fesjs/fes';
|
||||
@ -219,13 +253,13 @@ access.getAccess();
|
||||
```
|
||||
|
||||
### useAccess
|
||||
- **类型**：[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数
|
||||
|
||||
- **详情**：判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源Id
|
||||
- **返回值**：`ref`
|
||||
|
||||
|
||||
- **类型**：[composition](<(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)>) 函数
|
||||
- **详情**：判断某个资源是否可见。
|
||||
- **参数**：
|
||||
- accessId，资源 Id
|
||||
- **返回值**：`ref`
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="accessOnepicess">accessOnepicess</div>
|
||||
@ -233,34 +267,37 @@ access.getAccess();
|
||||
<script>
|
||||
import { useAccess } from '@fesjs/fes';
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
const accessOnepicess = useAccess('/onepiece1');
|
||||
return {
|
||||
accessOnepicess
|
||||
}
|
||||
}
|
||||
}
|
||||
accessOnepicess,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### v-access
|
||||
在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示DOM，当没有权限时隐藏此DOM。
|
||||
|
||||
在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示 DOM，当没有权限时隐藏此 DOM。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-access="accessId"> accessOnepicess </div>
|
||||
<div v-access="accessId">accessOnepicess</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 组件 Access
|
||||
|
||||
组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
|
||||
|
||||
```vue
|
||||
@ -269,11 +306,11 @@ export default {
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
return {
|
||||
accessId: 'accessOnepicess'
|
||||
}
|
||||
}
|
||||
}
|
||||
accessId: 'accessOnepicess',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
@ -3,15 +3,17 @@
|
||||
## 介绍
|
||||
|
||||
提供以 `component` 的方式，直接使用 svg icon 的能力。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-icon": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0-rc.2",
|
||||
"@fesjs/plugin-icon": "^3.0.0-rc.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -25,8 +27,8 @@
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :-----| :---- | :---- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| rotate | 旋转角度 | `number` |
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :----- | :----------- | :-------- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| 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",
|
||||
"version": "3.0.0-rc.7",
|
||||
"description": "一个好用的前端管理台快速开发框架",
|
||||
"preferGlobal": true,
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node scripts/build.mjs --watch",
|
||||
"build": "node scripts/build.mjs",
|
||||
"release": "node scripts/release.mjs",
|
||||
"docs:dev": "vuepress dev docs --clean-cache",
|
||||
"docs:build": "vuepress build docs --clean-cache",
|
||||
"test": "fes test",
|
||||
"lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"dependencies": {
|
||||
"chalk": "^5.0.1",
|
||||
"conventional-changelog-cli": "^2.2.2",
|
||||
"enquirer": "^2.3.6",
|
||||
"execa": "^6.1.0",
|
||||
"minimist": "^1.2.6",
|
||||
"semver": "^7.3.6",
|
||||
"vuepress": "2.0.0-beta.53"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@commitlint/cli": "^11.0.0",
|
||||
"@commitlint/config-conventional": "^11.0.0",
|
||||
"@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.3",
|
||||
"chokidar": "^3.5.2",
|
||||
"commitizen": "^4.2.1",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"fs-extra": "^10.0.0",
|
||||
"husky": "^4.3.0",
|
||||
"lint-staged": "^10.4.0",
|
||||
"postcss": "^8.0.0",
|
||||
"postcss-loader": "^5.0.0",
|
||||
"yargs-parser": "^20.2.9"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts}": [
|
||||
"npm run lint"
|
||||
]
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged",
|
||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||
"name": "fes.js",
|
||||
"version": "3.0.0-rc.7",
|
||||
"description": "一个好用的前端管理台快速开发框架",
|
||||
"preferGlobal": true,
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node scripts/build.mjs --watch",
|
||||
"build": "node scripts/build.mjs",
|
||||
"release": "node scripts/release.mjs",
|
||||
"docs:dev": "vuepress dev docs --clean-cache",
|
||||
"docs:build": "vuepress build docs --clean-cache",
|
||||
"test": "fes test",
|
||||
"lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"dependencies": {
|
||||
"chalk": "^5.0.1",
|
||||
"conventional-changelog-cli": "^2.2.2",
|
||||
"enquirer": "^2.3.6",
|
||||
"execa": "^6.1.0",
|
||||
"minimist": "^1.2.6",
|
||||
"semver": "^7.3.6",
|
||||
"vuepress": "2.0.0-beta.53"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@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",
|
||||
"@webank/eslint-config-webank": "1.2.7",
|
||||
"chokidar": "^3.5.2",
|
||||
"commitizen": "^4.2.1",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"fs-extra": "^10.0.0",
|
||||
"husky": "^4.3.0",
|
||||
"lint-staged": "^10.4.0",
|
||||
"postcss": "^8.0.0",
|
||||
"postcss-loader": "^5.0.0",
|
||||
"yargs-parser": "^20.2.9"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts}": [
|
||||
"npm run lint"
|
||||
]
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged",
|
||||
"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",
|
||||
"version": "3.0.0",
|
||||
"description": "fes 移动端项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"dev": "fes dev"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template-h5"
|
||||
},
|
||||
"author": "qlin",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "^1.2.3",
|
||||
"@ttou/postcss-px-to-viewport": "1.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.1",
|
||||
"@fesjs/plugin-icon": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-request": "^3.0.0-rc.3",
|
||||
"@fesjs/builder-webpack": "^3.0.0-rc.1",
|
||||
"vue": "^3.2.37",
|
||||
"core-js": "^3.27.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
"name": "@fesjs/template-h5",
|
||||
"version": "3.0.0",
|
||||
"description": "fes 移动端项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"dev": "fes dev"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template-h5"
|
||||
},
|
||||
"author": "qlin",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "1.2.7",
|
||||
"@ttou/postcss-px-to-viewport": "1.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.1",
|
||||
"@fesjs/plugin-icon": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-request": "^3.0.0-rc.3",
|
||||
"@fesjs/builder-webpack": "^3.0.0-rc.1",
|
||||
"vue": "^3.2.37",
|
||||
"core-js": "^3.27.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -1,60 +1,60 @@
|
||||
{
|
||||
"name": "@fesjs/template",
|
||||
"version": "3.0.0-beta.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test:unit": "fes test:unit"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "^1.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||
"@fesjs/fes-design": "^0.7.9",
|
||||
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
||||
"vue": "^3.2.45",
|
||||
"core-js": "^3.27.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
"name": "@fesjs/template",
|
||||
"version": "3.0.0-beta.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test:unit": "fes test:unit"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "1.2.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-access": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||
"@fesjs/fes-design": "^0.7.9",
|
||||
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
||||
"vue": "^3.2.45",
|
||||
"core-js": "^3.27.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
async function handleCacheClean(cwd) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cachePath = path.join(cwd, '.cache/webpack');
|
||||
if (!fs.existsSync(cachePath)) {
|
||||
return resolve();
|
||||
}
|
||||
require('get-folder-size')(cachePath, (err, size) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
|
||||
@ -149,6 +149,7 @@ export const access = {
|
||||
isDataReady,
|
||||
setRole,
|
||||
setAccess,
|
||||
match,
|
||||
getAccess: getAllowAccessIds,
|
||||
};
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
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
|
||||
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"
|
||||
}
|
||||
40
packages/fes-plugin-login/src/index.js
Normal file
40
packages/fes-plugin-login/src/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
import { join } from 'path';
|
||||
import { readFileSync } from 'fs';
|
||||
import { name } from '../package.json';
|
||||
|
||||
export default (api) => {
|
||||
api.addRuntimePluginKey(() => 'login');
|
||||
const pkgs = Object.keys({
|
||||
...api.pkg.dependencies,
|
||||
...api.pkg.devDependencies,
|
||||
});
|
||||
const namespace = 'plugin-login';
|
||||
|
||||
const absRuntimeFilePath = `${namespace}/runtime.js`;
|
||||
let generatedOnce = false;
|
||||
api.onGenerateFiles(() => {
|
||||
if (generatedOnce) return;
|
||||
generatedOnce = true;
|
||||
let content = readFileSync(join(__dirname, 'runtime', 'runtime.js'), 'utf-8');
|
||||
if (pkgs.find((item) => item.includes('@fesjs/plugin-access'))) {
|
||||
content = content.replace(
|
||||
'// ACCESS',
|
||||
`export function access(memo) {
|
||||
const { loginPath } = getLoginConfig();
|
||||
memo.ignoreAccess = (memo.ignoreAccess || []).concat(loginPath);
|
||||
return memo;
|
||||
}`,
|
||||
);
|
||||
}
|
||||
api.writeTmpFile({
|
||||
path: absRuntimeFilePath,
|
||||
content,
|
||||
});
|
||||
});
|
||||
|
||||
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
|
||||
|
||||
api.addConfigType(() => ({
|
||||
source: name,
|
||||
}));
|
||||
};
|
||||
51
packages/fes-plugin-login/src/runtime/runtime.js
Normal file
51
packages/fes-plugin-login/src/runtime/runtime.js
Normal file
@ -0,0 +1,51 @@
|
||||
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;
|
||||
}
|
||||
|
||||
// ACCESS
|
||||
|
||||
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,12 +1,15 @@
|
||||
import { winPath } from '@fesjs/utils';
|
||||
import { readdirSync, statSync } from 'fs';
|
||||
import { readdirSync, statSync, existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { winPath } from '@fesjs/utils';
|
||||
|
||||
/**
|
||||
* 获取文件夹所有JS文件路径
|
||||
* @param {string} dir
|
||||
*/
|
||||
function getDirFilePaths(dir) {
|
||||
if (!existsSync(dir)) {
|
||||
return [];
|
||||
}
|
||||
const dirs = readdirSync(dir);
|
||||
let pathList = [];
|
||||
for (const name of dirs) {
|
||||
@ -26,13 +29,13 @@ function getDirFilePaths(dir) {
|
||||
* @param {*} path
|
||||
*/
|
||||
function pathToHump(path, root) {
|
||||
return path.replace(root, '')
|
||||
return path
|
||||
.replace(root, '')
|
||||
.replace('.js', '')
|
||||
.replace(RegExp('(/|\\.|-|_)\\S', 'g'), text => text[1].toUpperCase())
|
||||
.replace(/\S/, text => text.toLowerCase());
|
||||
.replace(RegExp('(/|\\.|-|_)\\S', 'g'), (text) => text[1].toUpperCase())
|
||||
.replace(/\S/, (text) => text.toLowerCase());
|
||||
}
|
||||
|
||||
|
||||
function parsePlugin(paths = [], root) {
|
||||
const plugins = [];
|
||||
const importPlugins = [];
|
||||
@ -53,6 +56,6 @@ export function parseStore(root) {
|
||||
}
|
||||
});
|
||||
return {
|
||||
...parsePlugin(pluginPaths, root)
|
||||
...parsePlugin(pluginPaths, root),
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { readFileSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { winPath } from '@fesjs/utils';
|
||||
import { parseStore } from './helper';
|
||||
import { name } from '../package.json';
|
||||
import { parseStore } from './helper';
|
||||
|
||||
const namespace = 'plugin-pinia';
|
||||
|
||||
|
||||
@ -16,8 +16,6 @@ export default function (api) {
|
||||
key: 'addRuntimePluginKey',
|
||||
type: api.ApplyPluginsType.add,
|
||||
initialValue: [
|
||||
// 初始化数据
|
||||
'beforeRender',
|
||||
// modify渲染工具
|
||||
'modifyClientRenderOpts',
|
||||
'rootContainer',
|
||||
@ -31,6 +29,8 @@ export default function (api) {
|
||||
'modifyCreateHistory',
|
||||
// 修改路由配置
|
||||
'modifyRoute',
|
||||
// 初始化数据
|
||||
'beforeRender',
|
||||
// 生成router时触发
|
||||
'onRouterCreated',
|
||||
],
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
{{{ importsAhead }}}
|
||||
import {
|
||||
createApp,
|
||||
reactive,
|
||||
} from 'vue';
|
||||
import { plugin } from './core/plugin';
|
||||
import './core/pluginRegister';
|
||||
import { ApplyPluginsType } from '{{{ runtimePath }}}';
|
||||
import { getRoutes } from './core/routes/routes';
|
||||
import { updateInitialState } from './initialState';
|
||||
import DefaultContainer from './defaultContainer.jsx';
|
||||
|
||||
{{{ imports }}}
|
||||
@ -40,34 +38,10 @@ const renderClient = (opts = {}) => {
|
||||
return app;
|
||||
}
|
||||
|
||||
const beforeRender = async ({rootElement}) => {
|
||||
const beforeRenderConfig = plugin.applyPlugins({
|
||||
key: "beforeRender",
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {
|
||||
loading: null,
|
||||
action: null
|
||||
},
|
||||
});
|
||||
if (typeof beforeRenderConfig.action === "function") {
|
||||
const app = createApp(beforeRenderConfig.loading);
|
||||
app.mount(rootElement);
|
||||
try {
|
||||
const initialState = await beforeRenderConfig.action();
|
||||
updateInitialState(initialState || {})
|
||||
} catch(e){
|
||||
console.error(`[fes] beforeRender执行出现异常：`);
|
||||
console.error(e);
|
||||
}
|
||||
app.unmount();
|
||||
app._container.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
const getClientRender = (args = {}) => plugin.applyPlugins({
|
||||
key: 'render',
|
||||
type: ApplyPluginsType.compose,
|
||||
initialValue: async () => {
|
||||
initialValue: () => {
|
||||
const opts = plugin.applyPlugins({
|
||||
key: 'modifyClientRenderOpts',
|
||||
type: ApplyPluginsType.modify,
|
||||
@ -80,7 +54,6 @@ const getClientRender = (args = {}) => plugin.applyPlugins({
|
||||
{{/enableTitle}}
|
||||
},
|
||||
});
|
||||
await beforeRender(opts);
|
||||
return renderClient(opts);
|
||||
},
|
||||
args,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createRouter as createVueRouter, {{{ CREATE_HISTORY }}}, ApplyPluginsType } from '{{{ runtimePath }}}';
|
||||
import { plugin } from '../plugin';
|
||||
import { updateInitialState } from '../../initialState';
|
||||
|
||||
const ROUTER_BASE = '{{{ routerBase }}}';
|
||||
let router = null;
|
||||
@ -28,12 +30,45 @@ export const createRouter = (routes) => {
|
||||
createHistory: createHistory
|
||||
},
|
||||
});
|
||||
|
||||
history = route['createHistory']?.(route.base);
|
||||
router = createVueRouter({
|
||||
history,
|
||||
routes: route.routes
|
||||
});
|
||||
|
||||
let isInit = false
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if(!isInit) {
|
||||
isInit = true
|
||||
const beforeRenderConfig = plugin.applyPlugins({
|
||||
key: "beforeRender",
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {
|
||||
loading: null,
|
||||
action: null
|
||||
},
|
||||
});
|
||||
if (typeof beforeRenderConfig.action === "function") {
|
||||
const rootElement = document.createElement('div');
|
||||
document.body.appendChild(rootElement)
|
||||
const app = createApp(beforeRenderConfig.loading);
|
||||
app.mount(rootElement);
|
||||
try {
|
||||
const initialState = await beforeRenderConfig.action({router, history});
|
||||
updateInitialState(initialState || {})
|
||||
} catch(e){
|
||||
console.error(`[fes] beforeRender执行出现异常：`);
|
||||
console.error(e);
|
||||
}
|
||||
app.unmount();
|
||||
app._container.innerHTML = '';
|
||||
document.body.removeChild(rootElement);
|
||||
}
|
||||
}
|
||||
next();
|
||||
})
|
||||
|
||||
plugin.applyPlugins({
|
||||
key: 'onRouterCreated',
|
||||
type: ApplyPluginsType.event,
|
||||
|
||||
@ -20,7 +20,7 @@ function isPromiseLike(obj) {
|
||||
export const ApplyPluginsType = {
|
||||
compose: 'compose',
|
||||
event: 'event',
|
||||
modify: 'modify'
|
||||
modify: 'modify',
|
||||
};
|
||||
|
||||
export default class Plugin {
|
||||
@ -44,10 +44,7 @@ export default class Plugin {
|
||||
assert(!!plugin.apply, 'register failed, plugin.apply must supplied');
|
||||
assert(!!plugin.path, 'register failed, plugin.path must supplied');
|
||||
Object.keys(plugin.apply).forEach((key) => {
|
||||
assert(
|
||||
this.validKeys.indexOf(key) > -1,
|
||||
`register failed, invalid key ${key} from plugin ${plugin.path}.`
|
||||
);
|
||||
assert(this.validKeys.indexOf(key) > -1, `register failed, invalid key ${key} from plugin ${plugin.path}.`);
|
||||
if (!this.hooks[key]) this.hooks[key] = [];
|
||||
this.hooks[key] = this.hooks[key].concat(plugin.apply[key]);
|
||||
});
|
||||
@ -74,20 +71,11 @@ export default class Plugin {
|
||||
return hooks;
|
||||
}
|
||||
|
||||
applyPlugins({
|
||||
key,
|
||||
type,
|
||||
initialValue,
|
||||
args,
|
||||
async
|
||||
}) {
|
||||
applyPlugins({ key, type, initialValue, args, async }) {
|
||||
const hooks = this.getHooks(key) || [];
|
||||
|
||||
if (args) {
|
||||
assert(
|
||||
typeof args === 'object',
|
||||
'applyPlugins failed, args must be plain object.'
|
||||
);
|
||||
assert(typeof args === 'object', 'applyPlugins failed, args must be plain object.');
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
@ -95,8 +83,10 @@ export default class Plugin {
|
||||
if (async) {
|
||||
return hooks.reduce(
|
||||
async (memo, hook) => {
|
||||
assert(typeof hook === 'function' || typeof hook === 'object' || isPromiseLike(hook),
|
||||
`applyPlugins failed, all hooks for key ${key} must be function, plain object or Promise.`);
|
||||
assert(
|
||||
typeof hook === 'function' || typeof hook === 'object' || isPromiseLike(hook),
|
||||
`applyPlugins failed, all hooks for key ${key} must be function, plain object or Promise.`,
|
||||
);
|
||||
if (isPromiseLike(memo)) {
|
||||
memo = await memo;
|
||||
}
|
||||
@ -112,15 +102,13 @@ export default class Plugin {
|
||||
}
|
||||
return { ...memo, ...hook };
|
||||
},
|
||||
isPromiseLike(initialValue)
|
||||
? initialValue
|
||||
: Promise.resolve(initialValue)
|
||||
isPromiseLike(initialValue) ? initialValue : Promise.resolve(initialValue),
|
||||
);
|
||||
}
|
||||
return hooks.reduce((memo, hook) => {
|
||||
assert(
|
||||
typeof hook === 'function' || typeof hook === 'object',
|
||||
`applyPlugins failed, all hooks for key ${key} must be function or plain object.`
|
||||
`applyPlugins failed, all hooks for key ${key} must be function or plain object.`,
|
||||
);
|
||||
if (typeof hook === 'function') {
|
||||
return hook(memo, args);
|
||||
@ -128,21 +116,18 @@ export default class Plugin {
|
||||
return { ...memo, ...hook };
|
||||
}, initialValue);
|
||||
|
||||
|
||||
case ApplyPluginsType.event:
|
||||
return hooks.forEach((hook) => {
|
||||
assert(
|
||||
typeof hook === 'function',
|
||||
`applyPlugins failed, all hooks for key ${key} must be function.`
|
||||
);
|
||||
assert(typeof hook === 'function', `applyPlugins failed, all hooks for key ${key} must be function.`);
|
||||
hook(args);
|
||||
});
|
||||
|
||||
case ApplyPluginsType.compose:
|
||||
return () => _compose({
|
||||
fns: hooks.concat(initialValue),
|
||||
args
|
||||
})();
|
||||
return () =>
|
||||
_compose({
|
||||
fns: hooks.concat(initialValue),
|
||||
args,
|
||||
})();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -36,9 +36,6 @@ export default defineBuildConfig({
|
||||
icon: '/wine-outline.svg',
|
||||
match: ['/route/*'],
|
||||
},
|
||||
{
|
||||
name: 'store',
|
||||
},
|
||||
{
|
||||
name: 'editor',
|
||||
icon: '/wine-outline.svg',
|
||||
@ -74,9 +71,6 @@ export default defineBuildConfig({
|
||||
['1', '有效的'],
|
||||
],
|
||||
},
|
||||
vuex: {
|
||||
strict: true,
|
||||
},
|
||||
dynamicImport: true,
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json'],
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
"@fesjs/plugin-pinia": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-request": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-vuex": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-windicss": "^3.0.0-rc.0",
|
||||
"core-js": "^3.27.0",
|
||||
"cssnano": "^5.1.12",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { access as accessApi, pinia } from '@fesjs/fes';
|
||||
import { access as accessApi } from '@fesjs/fes';
|
||||
import PageLoading from '@/components/pageLoading.vue';
|
||||
import UserCenter from '@/components/userCenter.vue';
|
||||
import { useStore } from '@/store/main';
|
||||
@ -9,7 +9,7 @@ export const beforeRender = {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const store = useStore(pinia);
|
||||
const store = useStore();
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>{{store.counter}}</div>
|
||||
<div>{{ store.counter }} {{ store.userName }}</div>
|
||||
<FButton class="m-2" @click="store.increment">Button</FButton>
|
||||
</template>
|
||||
<config>
|
||||
@ -9,23 +9,21 @@
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { useStore } from '@/store/main';
|
||||
import { FButton } from '@fesjs/fes-design';
|
||||
import { useStore } from '@/store/main';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FButton
|
||||
FButton,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
console.log(store);
|
||||
return {
|
||||
store
|
||||
store,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h4>Vuex</h4>
|
||||
<div>
|
||||
<button @click="increment">click me：{{doubleCount}}</button>
|
||||
</div>
|
||||
<div>
|
||||
<button :disabled="disabled" @click="login">async login</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="fooBarIncrement">
|
||||
foo/bar：{{fooBarDoubleCount}}
|
||||
</button>
|
||||
</div>
|
||||
<div>{{address}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "store",
|
||||
"title": "$store"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore();
|
||||
console.log('store==>', store);
|
||||
const disabled = ref(false);
|
||||
return {
|
||||
address: computed(() => store.getters[GETTER_TYPES.user.address]),
|
||||
doubleCount: computed(
|
||||
() => store.getters[GETTER_TYPES.counter.doubleCount]
|
||||
),
|
||||
disabled,
|
||||
increment: () => store.commit(MUTATION_TYPES.counter.increment),
|
||||
login: () => {
|
||||
disabled.value = true;
|
||||
store.dispatch(ACTION_TYPES.user.login).then((res) => {
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert(res);
|
||||
disabled.value = false;
|
||||
});
|
||||
},
|
||||
fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment),
|
||||
fooBarDoubleCount: computed(
|
||||
() => store.getters[GETTER_TYPES.fooBar.doubleCount]
|
||||
)
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.page {
|
||||
}
|
||||
</style>
|
||||
@ -7,8 +7,8 @@ export const useStore = defineStore('main', {
|
||||
state: () => ({
|
||||
// all these properties will have their type inferred automatically
|
||||
counter: 0,
|
||||
name: 'Eduardo',
|
||||
isAdmin: true
|
||||
userName: 'Eduardo',
|
||||
isAdmin: true,
|
||||
}),
|
||||
actions: {
|
||||
increment() {
|
||||
@ -16,6 +16,6 @@ export const useStore = defineStore('main', {
|
||||
},
|
||||
randomizeCounter() {
|
||||
this.counter = Math.round(100 * Math.random());
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({
|
||||
count: 0
|
||||
}),
|
||||
mutations: {
|
||||
increment(state) {
|
||||
state.count++;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
doubleCount(state) {
|
||||
return state.count * 2;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
asyncIncrement({ commit }) {
|
||||
setTimeout(() => {
|
||||
commit('increment');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({
|
||||
count: 0
|
||||
}),
|
||||
mutations: {
|
||||
increment(state) {
|
||||
state.count++;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
doubleCount(state) {
|
||||
return state.count * 2;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
asyncIncrement({ commit }) {
|
||||
setTimeout(() => {
|
||||
commit('increment');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
import { createLogger } from 'vuex';
|
||||
|
||||
export default createLogger();
|
||||
@ -1,54 +0,0 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({
|
||||
name: 'aring',
|
||||
age: 20,
|
||||
count: 0
|
||||
}),
|
||||
mutations: {
|
||||
increment(state) {
|
||||
state.count++;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
doubleCount(state) {
|
||||
return state.count * 2;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
asyncIncrement({ commit }) {
|
||||
setTimeout(() => {
|
||||
commit('increment');
|
||||
}, 2000);
|
||||
},
|
||||
login() {
|
||||
return new Promise((reslove) => {
|
||||
setTimeout(() => {
|
||||
console.log('login');
|
||||
reslove('OK');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
address: {
|
||||
state: () => ({
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
zone: '南山区'
|
||||
}),
|
||||
getters: {
|
||||
address(state) {
|
||||
return state.province + state.city + state.zone;
|
||||
}
|
||||
}
|
||||
},
|
||||
posts: {
|
||||
namespaced: true,
|
||||
state: () => ({}),
|
||||
mutations: {
|
||||
doSomething() {}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -84,9 +84,6 @@ export default defineBuildConfig({
|
||||
['1', '有效的'],
|
||||
],
|
||||
},
|
||||
vuex: {
|
||||
strict: true,
|
||||
},
|
||||
dynamicImport: true,
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json'],
|
||||
|
||||
@ -1,68 +1,68 @@
|
||||
{
|
||||
"name": "@fesjs/template",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.0",
|
||||
"@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-model": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-jest": "^2.0.0",
|
||||
"@fesjs/plugin-vuex": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-request": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-qiankun": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-monaco-editor": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-windicss": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-pinia": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-watermark": "^3.0.0-rc.0",
|
||||
"@fesjs/fes-design": "^0.7.0",
|
||||
"core-js": "^3.27.0",
|
||||
"vue": "^3.2.37",
|
||||
"vuex": "^4.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
"name": "@fesjs/template",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.0",
|
||||
"@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",
|
||||
"@fesjs/plugin-vuex": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-request": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-qiankun": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-monaco-editor": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-windicss": "^3.0.0-rc.0",
|
||||
"@fesjs/plugin-watermark": "^3.0.0-rc.0",
|
||||
"@fesjs/fes-design": "^0.7.0",
|
||||
"core-js": "^3.27.0",
|
||||
"vue": "^3.2.37",
|
||||
"vuex": "^4.0.0",
|
||||
"pinia": "^2.0.11"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { access as accessApi, pinia, createWatermark } from '@fesjs/fes';
|
||||
import { access as accessApi, createWatermark } from '@fesjs/fes';
|
||||
import { ref, watch } from 'vue';
|
||||
import PageLoading from '@/components/pageLoading.vue';
|
||||
import UserCenter from '@/components/userCenter.vue';
|
||||
import { useStore } from '@/store/main';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -10,10 +9,6 @@ export const beforeRender = {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
});
|
||||
setRole('admin');
|
||||
resolve({
|
||||
userName: '李雷',
|
||||
@ -24,6 +19,12 @@ export const beforeRender = {
|
||||
},
|
||||
};
|
||||
|
||||
// export const login = {
|
||||
// hasLogin() {
|
||||
// return !!sessionStorage.getItem('login');
|
||||
// },
|
||||
// };
|
||||
|
||||
export const layout = (layoutConfig, { initialState }) => ({
|
||||
...layoutConfig,
|
||||
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>
|
||||
@ -8,7 +8,7 @@ export const useStore = defineStore('main', {
|
||||
// all these properties will have their type inferred automatically
|
||||
counter: 0,
|
||||
name: 'Eduardo',
|
||||
isAdmin: true
|
||||
isAdmin: true,
|
||||
}),
|
||||
actions: {
|
||||
increment() {
|
||||
@ -16,6 +16,6 @@ export const useStore = defineStore('main', {
|
||||
},
|
||||
randomizeCounter() {
|
||||
this.counter = Math.round(100 * Math.random());
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user