如何免费建设公司网站,企业网站的发展历史,在线优化工具,做网站优化找谁在上一章节中#xff0c;我们已经成功创建并登陆了系统#xff0c;现在需要为系统添加权限和登录认证#xff0c;以提高系统的安全性、数据保护、个性化服务和用户体验。此外#xff0c;添加权限和登录认证还可以方便管理员进行用户和授权管理。为了快速开发前端#xff0…
在上一章节中我们已经成功创建并登陆了系统现在需要为系统添加权限和登录认证以提高系统的安全性、数据保护、个性化服务和用户体验。此外添加权限和登录认证还可以方便管理员进行用户和授权管理。为了快速开发前端建议使用Strapi来实现数据库构建、管理数据、简化开发。在本章节中将会讨论如何添加权限和登录认证并展示如何使用Strapi来简化这个过程。
一、关于Strapi
Strapi是一个开源的Node.js内容管理框架它提供了一个可扩展的管理界面和API使得开发者可以更加轻松地构建和管理自己的应用程序。对于前端开发者来说使用Strapi的好处主要有以下几个
简化后端开发Strapi可以帮助前端开发者快速构建自己的后端API这样就不必从头开始构建自己的后端应用程序从而节省时间和精力。管理数据Strapi提供了一个可扩展的管理界面可以方便地管理应用程序中的数据例如添加、编辑、删除数据等。这对于前端开发者来说非常方便可以让他们专注于前端开发而不必担心后端管理。与前端框架集成Strapi支持与各种前端框架例如React、Vue.js等的集成这使得前端开发者可以更加方便地使用Strapi构建自己的应用程序。
二、安装Strapi并启动
先使用 strapi 官网提供的脚手架初始化一个后端应用注意此项目创建后默认新建的是SQLite数据库。
npx create-strapi-applatest strapiBackend --quickstart 启动后浏览器会打开默认Strapi Admin页面并进入开发模式http://localhost:1337/admin/在此页面创建一个管理员账户可以随便起但是一定要记住账密为本项目的第一个管理用户。此后会登入管理页面。
注意 如果服务没有自动启动可以进入项目路径下 cd starpiBackend 运行以下命令 npm run develop/ npm run start 。
对于Strapinpm run develop和 npm run start这两个命令的区别如下
npm run develop使用此命令启动Strapi应用程序时它将在开发模式下运行。这意味着Strapi会自动重新加载应用程序代码以反映更改并在终端输出日志信息以便开发人员可以及时调试应用程序。此命令还将启动本地数据库并将在控制台输出有关服务器和数据库的信息。该命令适用于在开发环境中使用Strapi。npm run start使用此命令启动Strapi应用程序时它将在生产模式下运行。这意味着Strapi会使用预编译的代码并且不会自动重新加载应用程序代码。此命令还将使用配置文件中指定的数据库启动应用程序并且不会在控制台输出过多的日志信息。该命令适用于在生产环境中使用Strapi。登陆后的strapi主界面如下
导航栏 在Strapi主界面的顶部有一个导航栏其中包含了链接到主要功能区域的菜单如Content-Types、Plugins、Settings等。导航栏还包括其他工具例如文档、支持和用户资料。仪表板 在Strapi主界面中间有一个仪表板其中包含有关当前应用程序的一些信息和统计数据例如数据库连接状态、API请求次数、文件存储使用情况等。Content-Types Content-Types是Strapi应用程序的主要功能之一它允许开发人员定义和管理应用程序中的数据结构例如博客文章、用户信息等。在Content-Types模块中开发人员可以创建、编辑、删除Content-Types并定义Content-Types的属性和关系。Plugins Strapi允许开发人员使用插件来扩展应用程序的功能。在Plugins模块中开发人员可以查看已安装的插件列表、安装新插件、配置插件等。Settings 在Settings模块中开发人员可以配置应用程序的各种设置例如电子邮件、安全、服务器、文本编辑器等。用户资料 在用户资料模块中用户可以查看和编辑自己的资料信息例如名称、电子邮件地址等。三、配置数据结构建表
创建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分配角色RoleRole角色被赋予权限来实现的。
创建两个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: userstrapi.io,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 有了一定的了解。
