在上一章节中,我们已经成功创建并登陆了系统,现在需要为系统添加权限和登录认证,以提高系统的安全性、数据保护、个性化服务和用户体验。此外,添加权限和登录认证还可以方便管理员进行用户和授权管理。为了快速开发前端,建议使用Strapi来实现数据库构建、管理数据、简化开发。在本章节中,将会讨论如何添加权限和登录认证,并展示如何使用Strapi来简化这个过程。
Strapi是一个开源的Node.js内容管理框架,它提供了一个可扩展的管理界面和API,使得开发者可以更加轻松地构建和管理自己的应用程序。对于前端开发者来说,使用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这两个命令的区别如下:
登陆后的strapi主界面如下:
创建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角色被赋予权限来实现的。
至此,基本的数据和角色权限已经建立,用户Strapi User 有两篇ID为1和2 的Message消息,且Strapi User被赋权canRead,可以对Message表进行读取操作。下面以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": "user@strapi.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} }
// 查询接口 http://localhost:1337/api/messages// 注意查询的API有鉴权,需要传入Authorization,具体值为 Bearer + 上面保存的jwt Authorization : 'Bearer ' + jwt//取出结果如下图
此时可以看到,未被赋权的Strapi User No 请求是被拒绝的。及权限校验成功。
本文介绍了如何使用 strapi 来构建一个简单的权限校验系统。通过介绍建表、插入数据、增加用户、授权和校验等方面的内容,读者可以了解到 strapi 在实现权限校验方面的优势和应用场景。不同于传统的后端开发,strapi 提供了一种更加灵活、快速的后台配置方式,使得创建 API 接口变得十分容易。本系列文章点后续会在实际项目中应用 strapi ,结合企业级项目常用的技术栈 react、antdpro 和 typescript,可供读者参考。相信通过本文的介绍,读者已经对 strapi 有了一定的了解。