在官方博客 [Registration and Login (Authentication) with Vue.js and Strapi](https://strapi.io/blog/registration-and-login-authentication-with-vue-js-and-strapi-1) 中演示如何实现注册与登录。实际重点部分是 Strapi 的[角色和权限插件](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html)，可以说这个插件让开发者不用再为项目考虑的用户登录注册与鉴权相关。

此外这里有个在线示例可供体验：[Vitesse Nuxt 3 Strapi](https://vitesse-nuxt3-strapi.vercel.app)



## 创建 Strapi 项目

这里省略创建 strapi 项目创建过程，具体可到 [Quick Start Guide](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html) 中查看。创建完项目，并注册管理员账号后，打开管理面板，根据自己需求创建数据。下面会介绍下管理面板的一些操作（以下针对中文面板）

### 角色列表

打开 **设置 => 用户及权限插件 => 角色列表**

![image-20220825131929320](https://img.kuizuo.cn/image-20220825131929320.png)

默认有两个角色 Authenticated 与 Pubilc，都不可删除，其中还有一个 Admin 是我自己创建的角色，用于分配管理员的权限。

Authenticated 对应的也就是登录后的角色，即携带 **Authorization** 协议头携带 jwt 的用户。

另一个 Pubilc 则是未授权用户，默认权限如下

![image-20220825132235027](https://img.kuizuo.cn/image-20220825132235027.png)

### 权限分配

双击角色可以到权限分配页面，比方说我想给 Authenticated 角色分配 Restaurant 表中查询数据，就可以按照如下选项中勾选，并且勾选其中一个权限（增删改查）可以在右侧看到对应的请求 api 接口（路由）

![image-20220825132716257](https://img.kuizuo.cn/image-20220825132716257.png)

### 默认角色

可以在 **设置 => 用户及权限插件 => 高级设置** 中分配默认角色，此外这里还可以配置注册，重置密码等操作。对于这些功能而言，传统开发就需要编写相当多的代码了，而 Strapi 的 [角色和权限](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html) 插件能省去开发这一部分功能的时间。

![image-20220825132948740](https://img.kuizuo.cn/image-20220825132948740.png)

### 管理员权限

在 **设置 => 管理员权限** 也可以看到角色列表与用户列表，不过这个只针对登录 strapi 仪表盘的用户，与实际业务的用户毫不相干。通俗点说就是数据库系统的用户与后台管理系统用户的区别。

一开始登录面板创建的用户在 **设置 => 管理员权限 => 用户列表** 中可以看到，而通过api http://localhost:1337/api/auth/local/register 注册的用户则是在 **内容管理 => User** 中查看。

## 使用 HTTP 请求用户操作（通用）

这里先给出官方提供的注册和登录地址，分别是：

[http://localhost:1337/api/auth/local/register](http://localhost:1337/api/auth/local/register)

[http://localhost:1337/api/auth/local](http://localhost:1337/api/auth/local)

分别可在 [Login](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#login) 与 [Register](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#registration) 中查看官方演示例子，例如

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

```mdx-code-block
<Tabs>
<TabItem value="login" label="登录" default>
```

```js {4}
import axios from 'axios'

// Request API.
axios
  .post('http://localhost:1337/api/auth/local', {
    identifier: 'user@strapi.io',
    password: 'strapiPassword',
  })
  .then(response => {
    // Handle success.
    console.log('Well done!')
    console.log('User profile', response.data.user)
    console.log('User token', response.data.jwt)
  })
  .catch(error => {
    // Handle error.
    console.log('An error occurred:', error.response)
  })
```

```mdx-code-block
</TabItem>
<TabItem value="register" label="注册">
```

```js {4}
import axios from 'axios'

// Request API.
axios
  .post('http://localhost:1337/api/auth/local/register', {
    username: 'Strapi user',
    email: 'user@strapi.io',
    password: 'strapiPassword',
  })
  .then(response => {
    // Handle success.
    console.log('Well done!')
    console.log('User profile', response.data.user)
    console.log('User token', response.data.jwt)
  })
  .catch(error => {
    // Handle error.
    console.log('An error occurred:', error.response)
  })
```

```mdx-code-block
</TabItem>
</Tabs>
```

除了登录外，还有几个api可能还会用到如获取个人信息，重置密码，修改密码，发送邮箱验证等等。更多可到 [Roles & Permissions](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#authentication) 中查看

通过 HTTP 这种方案可以说是最通用的了，不过有些框架还提供相应的模块来调用 Strapi。

## Nuxt

官方 Nuxt3 提供了 hooks 方案使用 Strapi。具体可看 [Nuxt Strapi Module](https://strapi.nuxtjs.org/)。Nuxt2 可看[这里](https://strapi-v0.nuxtjs.org/hooks)

通过相应的 hooks 就可以实现登录注册以及数据增删改查的功能，演示例子可看 [Usage](https://strapi.nuxtjs.org/usage)

这里有一份我创建的预设模板 [kuizuo/vitesse-nuxt3-strapi](https://github.com/kuizuo/vitesse-nuxt3-strapi)，一开始的示例也是基于这个模板来搭建的。不过目前 Strapi 对 TypeScript 支持不是那么友好，尤其在 window 下会出现无法运行的情况，详看这个 [pr](https://github.com/strapi/strapi/pull/14088)。所以目前 backend 使用 js 创建，然后增加 ts 相关支持的，所以有些 ts 支持可能不是那么友好。

:::note

原本我考虑的是使用 starter 方式来创建nuxt3 strapi项目，但是就在我创建完 starter 与 template 准备使用 `yarn create strapi-starter strapi-nuxt3 https://github.com/kuizuo/strapi-starter-nuxt3` 下载模板时，不出意外又出意外的报错了，由于这个报错也不好排查就暂时放弃了。

总之又是一趟白折腾的经过。

:::

## Next

Next 我暂未找到相关库可以像 Nuxt 提供 Strapi 的服务。不过 Strapi 官方有提供 [sdk](https://github.com/strapi/strapi-sdk-javascript)的方案来调用 strapi 服务，而不用发送 http 请求的形式来调用，具体可以到官方提供的 [sdk](https://github.com/strapi/strapi-sdk-javascript) 查看如何使用，这里不做演示。有如下两个SDK可供选择：

[strapi/strapi-sdk-javascript](https://github.com/strapi/strapi-sdk-javascript) 官网

[Strapi SDK (strapi-sdk-js.netlify.app)](https://strapi-sdk-js.netlify.app/) 社区

Strapi 实现用户注册与登录

老早老早之前就听过 monorepo（单一代码库） 这个名词，也大致了解其出现的意义与功能。但奈何自己的一些小项目中暂时还用不上多项目存储库，所以迟迟没有尝试使用。

但随着越来越多的开源项目使用 monorepo，现在不实践到时候也肯定是要实践的，这次实践也算是为以后的技能先做个铺垫了。



## 介绍

前言铺垫这么多，就举个例子介绍下 monorepo 的应用场景，比如现在有个 UI 组件库的开源项目。

既然是组件库，首先肯定要有组件库的代码吧，此外可能还有脚手架（CLI）或是工具库（utils）或者是插件要作为 npm 包发布，等等。

如果是传统的开发，每个项目都作为单独的 npm 项目来发布引用，就需要创建多个代码仓库，即**多代码库（multirepos）**。很显然这样在开发以及代码仓库的协同上肯定有弊端，而 monorepo 正是解决这种问题，**将所有的项目在一个代码仓库中，即单一代码库（monorepos）**。

这只是 monorepo 的一个应用场景例子，这里有一个更好的例子 [前端工程化：如何使用 monorepo 进行多项目的高效管理](https://juejin.cn/post/7043990636751503390)，更多可以参考使用 monorepo 的开源项目来了解。在 [这里](https://pnpm.io/zh/workspaces#%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B) 可查看使用了 pnpm 工作空间功能的最受欢迎的开源项目。

有篇文章推荐阅读 [5 分钟搞懂 Monorepo - 简书 (jianshu.com)](https://www.jianshu.com/p/c10d0b8c5581)

这里还有份手册可供阅读 [What is a Monorepo? | Turborepo](https://turborepo.org/docs/handbook/what-is-a-monorepo)

## 上手实践

你可以 clone [https://github.com/kuizuo/monorepo-demo](https://github.com/kuizuo/monorepo-demo) 来查看本文示例代码仓库

这里使用 pnpm 的 [workspace](https://pnpm.io/zh/workspaces) 来创建 monorepo 代码仓库，此外目前主流的还有 yarn workspace + [lerna](https://lerna.js.org/)，[nx](https://nx.dev/)，[turborepo](https://turborepo.org/)等等。

### 项目结构

pnpm 内置了对单一存储库（也称为多包存储库、多项目存储库或单体存储库）的支持， 你可以创建一个 workspace 以将多个项目合并到一个仓库中。

pnpm 要使用 monorepo 的话，需要创建 pnpm-workspace.yaml 文件，其内容如下

```YAML
packages:
  - 'packages/*'
```

其中 packages 为多项目的存放路径（一般为公共代码），pnpm 将 packages 下的子目录都视为一个项目。此外如果项目还有文档或在线演示的项目（这些不作为核心库），放在 packages 有些许不妥，就可以像下面这样来配置 workspace

```YAML
packages:
  - packages/*
  - docs
  - play
```

像一开始所举例的代码仓库的项目结构如下

```bash
monorepo-demo
├── package.json
├── packages
│   ├── components          # 组件库
│   │   ├── index.js
│   │   └── package.json
│   ├── cli                 # CLI
│   │   ├── index.js
│   │   └── package.json
│   ├── plugins             # 插件
│   │   ├── index.js
│   │   └── package.json
│   ├── utils               # 工具
│   │   ├── index.js
│   │   └── package.json
├── docs                    # 文档
│   │   ├── index.js
│   │   └── package.json
├── play                    # 在线演示
│   │   ├── index.js
│   │   └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
```

其中 packages 下存放的就是多个项目代码库，假设项目就叫 demo（因为到时候这些包是有可能要发布的，而名字就要保证唯一），那么项目的 package.json 如下演示：

```json
{
  "name": "@demo/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "@packages/utils": "workspace:^1.0.0"
  }
}
```

### 安装依赖

执行`pnpm install` 会自动安装所有依赖（包括 packages 下），所以我们肯定不会傻傻 cd 到每个目录下，然后执行`pnpm install` 来一个个安装依赖。

假设现在我要为某个项目添加依赖，例如为 utils 模块添加 lodash 的话，按之前可能会 cd 到 utils 目录执行`pnpm add loadsh` ，其实完全不用，pnpm 提供 `--filter` 选项来指定包安装依赖，命令如下

```bash
pnpm --filter <package_selector> <command>
```

例如：

```bash
pnpm -F @demo/utils add lodash
```

> `-F`等价于`--filter`

假设现在写好了 utils 模块，`@demo/components`准备使用 utils 模块，可以按照如下操作

```bash
pnpm -F @demo/components add @demo/utils@*
```

这个命令表示在`@demo/components`安装`@demo/utils`，其中的`@*`表示默认同步最新版本，省去每次都要同步最新版本的问题。

### 启动项目

使用**node packages/component** （默认执行 index.js 文件）

```bash
node packages/components

```

更好的选择是编写 npm scripts 就像下面这样：

```json
  "scripts": {
    "test": "vitest",
    "dev": "pnpm -C play dev",
    "docs:dev": "pnpm run -C docs dev",
    "docs:build": "pnpm run -C docs build",
    "docs:serve": "pnpm run -C docs serve",
  },
```

其中[ -C \<path\>](https://pnpm.io/pnpm-cli#-c-path---dir-path) 表示 在 path 下运行 npm 脚本 而不是在当前工作路径下。例如根目录下执行 `npm run docs:dev` 便会执行 `docs/package.json` `dev`脚本，同理`build`和`serve`也是一样。

此外更多的可能会在根目录下创建 script 脚本，然后编写（编译，发布）脚本。

## Turborepo

在上面只是介绍了使用 pnpm workspace 来搭建一个 monorepo 的仓库，但很多时候还需要搭配适当的工具来扩展 monorepo， Turborepo 就是其中之一，利用先进的构建技术和思想来加速开发，构建了无需配置复杂的工作。

这里就不做介绍，这篇 [🚀Turborepo：发布当月就激增 3.8k Star，这款超神的新兴 Monorepo 方案，你不打算尝试下吗？ - 掘金 (juejin.cn)](https://juejin.cn/post/7129267782515949575) 就非常值得推荐阅读。

## 总结

搭建一个 monorepo 的仓库其实挺简单的，但也并不是什么项目使用 monorepo 就好，想想看，所有项目和依赖都堆积在一起，那么项目启动速度必然不如单项目启动来的快。就比如一个博客项目，就完全不至于将博客细分为文章/评论/搜索等等划分，还不如统一将代码都直接写到 src 目录下。

可以说当使用 monorepo 作为项目管理时，每个模块就相当于按照一个 npm 包发布的方式创建，而不是像 src/utils 那么随便了，而开源项目大部分都是要作为 npm 包的方式发布的，使用 monorepo 来管理多个项目自然也就再合适不过了。

## 相关文章

[5 分钟搞懂 Monorepo - 简书 (jianshu.com)](https://www.jianshu.com/p/c10d0b8c5581)

[前端工程化：如何使用 monorepo 进行多项目的高效管理](https://juejin.cn/post/7043990636751503390)

[pnpm workspace](https://pnpm.io/zh/workspaces)

[🚀Turborepo：发布当月就激增 3.8k Star，这款超神的新兴 Monorepo 方案，你不打算尝试下吗？ - 掘金 (juejin.cn)](https://juejin.cn/post/7129267782515949575)

pnpm monorepo实践

在以前，我可以花费 4，5 个小时的时间专注于一件事情上，并且丝毫没有不耐烦的意思。而且这种状态能持续个好几天。例如拼个积木，拼个拼图，写个代码等等。专注个半天根本不成问题。

当然有很大一部分是因为兴趣，要让我做一件乏味的事，别说坚持了，开始可能都成一个问题。但现在的我对很多东西都难以提起兴趣，要是放在以往，都能让我兴奋个数天。可现在，很难。



不知为何，感觉专注一件事变得特别困难，总沉不下心来。总感觉一切东西不咋那么美好，都很乏味，难以提起内心仅留的一丝兴趣，总感觉自我内心好像变了个特别无趣的人。这也间接导致我的耐心也不在像之前那样，现在的我遇到一些繁琐的事情，比如写报告，办手续，做核酸等等，我都会感到十分厌烦。

像之前如果有人问我代码相关的问题，即便是我没接触过的知识方面，我都愿意去尝试了解学习为他解答。可现在，问我不知道的东西，我张口就是不知道。就算我知道，我的回复也往往是丢给他一个相关链接，让他自己研究琢磨，仿佛在告诉他我极不耐烦的样子（当然也有可能是这类问题问的太多了）。之前打车哪怕师傅晚个 10 分钟来接送我都能接受，现在 3 分钟我就已经有点坐立不安了。

对于这种耐心的转变，我自己都认为有点不太思议。我不知道是不是由于之前太过于耐心，然后种种环境下不断磨练中，导致耐心值不断的下降，最终导致在很多事情都感觉不耐烦，难以平静。

## **耐心值下降**

自我分析了耐心值下降的可能原因：

### **提不起兴趣**

说到兴趣，这可就不得不提起 5 年级开始就接触[手部极限运动](https://baike.baidu.com/item/手部极限运动/2431307)中的转笔，那也算是我第一个对其感兴趣的东西。期间不断在尝试其他的手指极限运动并持续坚持了整整 8 年，直到高考结束便退坑了。至于为何不再坚持下去，有很大原因是因为 QQ 被永久冻结导致一些社交圈失联，再加上当时假期一直在学习编程。可以说没有这些意外，我依旧会坚持我这持续这份爱好，并且会将其爱好当做一个我的吃饭的本事。

目前仅余的手指极限运动也就只有转手机了。同样的对于游戏也不再有新鲜感去尝试，偶尔还会下载英雄联盟玩上熟悉的英雄回忆当年的高(下)光(饭)时刻（当然游戏方面也和 QQ 冻结连同游戏账号一并冻结有关）。

在回到目前主业的编程在我接触了进 3 年内，期间踩的无数的坑，做着重复的业务需求，尤其是所感兴趣，但到头来却又不可完成。渐渐地不再有当初以往的热情，不再乐此不疲。即便完成了一个自我认为成就感爆满的事情，也容易在接下来几天的时间内消磨下去。

当所感兴趣的东西太多，对于新事物就不再容易提起兴趣。

人的耐心都是被一些自己感兴趣，但是又不可能完成的事，一点一点消磨殆尽的。

### **过快的生活节奏**

现在技术发展是真的快，有很多新的突破和发现。生活质量也在不断变好，但这也间接导致生活节奏过快，社会更加内卷。变化太快。现在的生活总让我感觉一天好像什么事情都没干，一从座位起来就已经是第二天的凌晨。前一秒还在想着吃什么晚饭，后一秒就到了吃夜宵的时刻。看视频也不再是原速播放，而是更快的 1.5 倍，甚至 2 倍速。原本可能要 2 个小时完成的东西，硬是被压缩到 1 个小时内完成。

在这样的快节奏生活工作下，耐心值怎能不下降？又怎能静的下心来去完成任务？

### **走神**

在写代码任务的时候，有时候一个准备实现的功能好像之前实现过，然后去翻看之前的代码，然后就发现写的还不够好，虽然能用，但总归少些什么，于是就开始重构，然后慢慢的就偏离原本的工作流，导致大部分的时间都在重构该功能，而不是在原本的任务。不过这样也确实完善了该部分的代码，至少不是一次无意义的重构。

有时候看到一些推荐类的文章或者视频，可能看到中间有一个之前没遇到过的新鲜玩意，然后就开始打开官网，然后去看相关示例。刷着刷着浏览器网页打开多了，哪里还会在意每个标签页的标题，早都给慢慢的标签挤的只剩 logo 了，这时候我大概率是直接整个浏览器关闭，在打开新窗口，而一开始的所推荐的内容，可能早已忘得一干二净了。

但这样也确实加深了我中途对这玩意的印象和认知，但却让我也忘了一开始的本意。不过一生中要接触许许多多的新的美食，普通人哪里有精力和时间去一遍遍的尝试，要做的只是将自己能够吃到吃进嘴里，体会其中的美味这就足够了。对于任何新鲜事物的尝试也应如此。（有点扯远了）

所以久而久之，往往越想专注的时候，越容易被细微的东西吸引注意力。专注不下去了，耐心也随之消磨下去。

## **消磨耐心**

可能是因为经历太多耐心的过程，耐心在无形之间被不断磨灭，最终在不断消磨下导致原本不厌其烦 🙂 的样子变的极其厌烦 😣。

在这过程中，耐心也实实在在的告诉我正在成长，也在警示我不该松懈。即便内心再怎么烦躁，所表现的也应心照不宣。

消磨耐心的过程不妨是在打磨工具，将一个钝器打磨成一个利器。绝大多数人一开始的耐心与容忍程度都是非常高的，但随之不断的经历。而多数人的耐心自然也在不断地下降，往往成长的也就越多。

**慢慢磨练一个人的耐心，才更能考验一个人的心智。**

正被消磨殆尽的耐心

准备给我的一个 Vite 项目进行重构，其中一个功能(函数)要花费 JS 主线程大量时间，会导致主线程画面卡死，无法正常点击，直到该功能(函数)执行完毕而言。这样的用户体验非常差，于是就准备使用 WebWorker 对该功能封装。



## WebWorker 限制

（1）**同源限制**

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）**DOM 限制**

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用`document`、`window`、`parent`这些对象。但是，Worker 线程可以`navigator`对象和`location`对象。

（3）**通信联系**

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）**脚本限制**

Worker 线程不能执行`alert()`方法和`confirm()`方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）**文件限制**

Worker 线程无法读取本地文件，即不能打开本机的文件系统（`file://`），它所加载的脚本，必须来自网络。

综合以上限制，我所要重构的功能面临以下问题

- 一些 window 下的函数，或者主线程下全局数据函数，无法共同
- 无法读取本地文件，需要创建网络文件（如 Blob 或 Vite 导入）
- Worker 线程和主线程通信要使用`worker.postMessage`与`self.addEventListener`来发送与监听数据。

**所以在考虑使用 Worker 的时候就要考虑这个功能是否值得使用 Worker，能否使用 Worker 实现**

## Vite 中使用 WebWorker

这里先给出我的最优解，在 Vite 中[静态资源处理 ](https://cn.vitejs.dev/guide/assets.html)，其中可以[导入脚本作为 Worker](https://cn.vitejs.dev/guide/assets.html#importing-script-as-a-worker)

```javascript title="main.js"
import Worker from './test.worker.js?worker'
const worker = new Worker()
```

这个 worker 就是所要的 Worker 对象，接着就可以对象的 postMessage 与 onmessage 来数据通信，如

```javascript title="main.js"
worker.onmessage = (e) => {
  console.log('main.js', e.data)
}

worker.postMessage('hello from main')
```

```javascript title="test.worker.js"
self.addEventListener(
  'message',
  function (e) {
    console.log('test.worker.js', e.data)
    self.postMessage('hello from worker')
  },
  false,
)
```

不过 Vite 还有[其他方式](https://cn.vitejs.dev/guide/features.html#web-workers)导入 Worker

```javascript
const worker = new Worker(new URL('./worker.js', import.meta.url))
```

这种方式相对更加标准，但是如果worker并不是一个js文件，而是ts文件，并且还夹杂一些第三方的包，这种方式是有可能会失败，本人测试是这样的，所以推荐一开始的方式，也就是带有查询后缀的导入。

在打包的时候将其实所用到引入的依赖合并成一个文件，如果打开开发者工具，可以在源代码面板的右侧线程中看到主线程，以及worker线程。

## 参考文章

[使用 Web Workers - Web API 接口参考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)

[Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2018/07/web-worker.html)