react+antdpro+ts实现企业级项目二：Strapi及认证登陆模块

在上一章节中，我们已经成功创建并登陆了系统，现在需要为系统添加权限和登录认证，以提高系统的安全性、数据保护、个性化服务和用户体验。此外，添加权限和登录认证还可以方便管理员进行用户和授权管理。为了快速开发前端，建议使用Strapi来实现数据库构建、管理数据、简化开发。在本章节中，将会讨论如何添加权限和登录认证，并展示如何使用Strapi来简化这个过程。

一、关于Strapi

Strapi是一个开源的Node.js内容管理框架，它提供了一个可扩展的管理界面和API，使得开发者可以更加轻松地构建和管理自己的应用程序。对于前端开发者来说，使用Strapi的好处主要有以下几个：

1. 简化后端开发：Strapi可以帮助前端开发者快速构建自己的后端API，这样就不必从头开始构建自己的后端应用程序，从而节省时间和精力。
2. 管理数据：Strapi提供了一个可扩展的管理界面，可以方便地管理应用程序中的数据，例如添加、编辑、删除数据等。这对于前端开发者来说非常方便，可以让他们专注于前端开发，而不必担心后端管理。
3. 与前端框架集成：Strapi支持与各种前端框架（例如React、Vue.js等）的集成，这使得前端开发者可以更加方便地使用Strapi构建自己的应用程序。

二、安装Strapi并启动

先使用 strapi 官网提供的脚手架初始化一个后端应用，注意此项目创建后默认新建的是SQLite数据库。

npx create-strapi-app@latest strapiBackend --quickstart

启动后浏览器会打开默认Strapi Admin页面并进入开发模式http://localhost:1337/admin/，在此页面创建一个管理员账户（可以随便起，但是一定要记住账密），为本项目的第一个管理用户。此后会登入管理页面。

注意： 如果服务没有自动启动，可以进入项目路径下 cd starpiBackend 运行以下命令 ：npm run develop/ npm run start 。

对于Strapi，npm run develop和 npm run start这两个命令的区别如下：

1. npm run develop：使用此命令启动Strapi应用程序时，它将在开发模式下运行。这意味着Strapi会自动重新加载应用程序代码以反映更改，并在终端输出日志信息，以便开发人员可以及时调试应用程序。此命令还将启动本地数据库，并将在控制台输出有关服务器和数据库的信息。该命令适用于在开发环境中使用Strapi。
2. npm run start：使用此命令启动Strapi应用程序时，它将在生产模式下运行。这意味着Strapi会使用预编译的代码，并且不会自动重新加载应用程序代码。此命令还将使用配置文件中指定的数据库启动应用程序，并且不会在控制台输出过多的日志信息。该命令适用于在生产环境中使用Strapi。

登陆后的strapi主界面如下：

1. 导航栏： 在Strapi主界面的顶部，有一个导航栏，其中包含了链接到主要功能区域的菜单，如Content-Types、Plugins、Settings等。导航栏还包括其他工具，例如文档、支持和用户资料。
2. 仪表板： 在Strapi主界面中间，有一个仪表板，其中包含有关当前应用程序的一些信息和统计数据，例如数据库连接状态、API请求次数、文件存储使用情况等。
3. Content-Types： Content-Types是Strapi应用程序的主要功能之一，它允许开发人员定义和管理应用程序中的数据结构，例如博客文章、用户信息等。在Content-Types模块中，开发人员可以创建、编辑、删除Content-Types，并定义Content-Types的属性和关系。
4. Plugins： Strapi允许开发人员使用插件来扩展应用程序的功能。在Plugins模块中，开发人员可以查看已安装的插件列表、安装新插件、配置插件等。
5. Settings： 在Settings模块中，开发人员可以配置应用程序的各种设置，例如电子邮件、安全、服务器、文本编辑器等。
6. 用户资料： 在用户资料模块中，用户可以查看和编辑自己的资料信息，例如名称、电子邮件地址等。

三、配置数据结构（建表）

创建Content-type（数据表结构）：Content-type用来创建数据结构，当创建一个新的项目，第一步就是建立数据结构。 注意： Content-type等同于数据库中的表，上述操作等同于在数据库内创建了一张包含username、email等各种字段的表。

3.1 User表

对于我们前端项目第一步需要实现登陆，即需要一个User的内容类型。启动Strapi内置一个User类型， 其中包含username、email等几个常用的字段，根据项目需要，可以增加字段如dept、dept_name、full_name等。具体操作步骤如下图所示。

3.2 建表

假如需要实现一个微博系统，那么最起码需要实现用户表、信息Message表、主题Topic表、图片Image表，且不同的表之间存在对应关系，一对多或多对一。

• 一个用户可以发送多条信息：一对多
• 一个话题下也可以有多条信息：一对多
• 一条信息可以上传多张图片：一对多

如下图所示，创建好对应的Topic表及内部的字段topicId、title、desc等。同理创建好Message表

3.3 建立表关联

建立完 Message 表后，需要与 User 建立关系多对一对关联。

重复上述步骤可以建完所有表了，其中 Images 表和User表是不要建立的，因为用户和附件上传是通用功能，strapi 系统帮我们内置了，极大地加快了开发效率。

3.5 创建实体entry

创建实体entry 可以理解为往对应的表内插入数据。如下图所示，向message表内插入一条记录

插入数据后记得点击publish 发布出去，等同于将这个操作commit提交。

3.6 接口添加权限

数据准备好后，需要给其添加权限，否则数据暴露在接口外，容易引起安全问题。那么如何添加权限？ Strapi的权限是通过给用户User分配角色Role，Role角色被赋予权限来实现的。

• 创建两个Role，并给对应的表赋予CRUD增删改查的权限。

• 其次创建两个User，并给用户赋权

• 将Message赋予User

四、Postman模拟登陆及查询及校验权限操作

至此，基本的数据和角色权限已经建立，用户Strapi User 有两篇ID为1和2 的Message消息，且Strapi User被赋权canRead，可以对Message表进行读取操作。下面以postman模拟登陆并实现权限校验。

• postman模拟登陆

// 模拟登陆
http://localhost:1337/api/auth/local// 传入identifier和password ，其中identifier为email或者username
{"identifier": "Strapi User","password":"xxxx"
}//取出结果如下，注意取得的jwt需要保存，后续接口权限调用需要
{"jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjc4MTk4MTY2LCJleHAiOjE2ODA3OTAxNjZ9.wO4w-CX3-mqp37MM4ugLzqFenifle2W9VbQ_3_Qu6mA","user": {"id": 1,"username": "Strapi User","email": "[e-mail]","provider": "local","confirmed": true,"blocked": false,"createdAt": "2023-03-07T08:56:19.031Z","updatedAt": "2023-03-07T14:09:07.415Z","access": null,"full_name": null,"uni_id": null}
}

• Strapi User查询数据

// 查询接口
http://localhost:1337/api/messages// 注意查询的API有鉴权，需要传入Authorization,具体值为 Bearer + 上面保存的jwt
Authorization ： 'Bearer ' + jwt//取出结果如下图

• Strapi User No 登陆

• Strapi User No 查询

此时可以看到，未被赋权的Strapi User No 请求是被拒绝的。及权限校验成功。

五、总结

本文介绍了如何使用 strapi 来构建一个简单的权限校验系统。通过介绍建表、插入数据、增加用户、授权和校验等方面的内容，读者可以了解到 strapi 在实现权限校验方面的优势和应用场景。不同于传统的后端开发，strapi 提供了一种更加灵活、快速的后台配置方式，使得创建 API 接口变得十分容易。本系列文章点后续会在实际项目中应用 strapi ，结合企业级项目常用的技术栈 react、antdpro 和 typescript，可供读者参考。相信通过本文的介绍，读者已经对 strapi 有了一定的了解。