大家好👋!本文我将介绍 Mern Stack 中的身份验证。
登录/注册或者我会说身份验证是任何应用程序的基础之一,无论它是 Web 应用程序还是 Android 应用程序。在本教程中,您将使用 MERN Stack 学习此身份验证。我们将使用 MERN 堆栈创建一个最小的全栈登录/授权应用程序(MongoDB 用于我们的数据库,Express 和 Node 用于我们的后端,React 用于我们的前端)。
我们将借助 Express js 创建身份验证端点,并建立 MongoDB 连接以将用户数据存储在其中。我们将在前端使用 react 和 react-hook 进行状态管理。
应用功能
- 注册
- 登录
- 访问受保护的页面
- 登出
在本文中,我将介绍:
- 使用 npm 设置我们的后端并安装必要的软件包。
- 使用 MongoDB Atlas 设置数据库。
- 使用 Mongoose 为用户创建数据库模式。
- 创建注册路线并将数据保存到数据库。
先决条件
您至少应该对基本的编程概念有基本的了解,并且对介绍性 HTML/CSS/Javascript 有一定的经验。在开始之前,请安装我们设置应用程序所需的所有工具。
- Nodejs
- Mongodb
- Create-React-App
- Visual Studio Code 或您最喜欢的编辑器
- Postman(API 测试)
让我们开始吧 !
设置后端
在您的工作区中创建一个项目文件夹以构建 REST API(后端)并运行以下命令。
npm init
您可以安全地通过其中的大部分。运行命令后,会创建 package.json
使用命令安装以下依赖项:
npm i express mongoose nodemon
Express :
Express 是一个 nodejs Web 应用程序框架,有助于创建 REST API。
Mongoose :
Mongoose 是一个用于 MongoDB 和 Node.js 的对象数据建模 (ODM) 库。Node.js 允许您与 MongoDB 数据库进行交互。
Nodemon :
Nodemon 是一个工具,通过在文件更改时自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。
在文件夹中创建文件 app.js 并编写以下代码。
const express=require('express')
const app=express()
const PORT=5000
app.get('/',(req,res)=>{
res.send("hello world")
})
app.listen(PORT,()=>{
console.log("Server is running on",PORT)
})
在代码中,我们基本上是在 localhost 的 5000 端口创建一个服务器。这个应用程序启动一个服务器并在端口 5000 上侦听连接。该应用程序响应“Hello World!” 对根 URL (/) 或路由的请求。对于其他所有路径,它将以 404 Not Found 响应。
转到命令行并运行命令:
nodemon app
您将在命令行中看到一条消息:
现在,打开您的浏览器并转到“ localhost:5000 ”,您将看到如下内容:
哇哦😍…您已成功创建服务器。
将我们的服务器连接到数据库
下一步是创建一个 MongoDB atlas 帐户。您可以借助本 教程 或此 视频 来创建帐户。
创建帐户后,获取 mongodb 的 url。您的网址如下所示:
mongodb+srv://<username>:<password>@cluster0.suxf5.mongodb.net/<dbname>?retryWrites=true&w=majority
将 MongoDB atlas cloud 的用户名(和密码)替换为您创建的数据库名称()。
接下来,我们将测试我们的 MongoDB 与我们的 express 服务器的连接。在我们的 index.js 文件中添加以下代码。
现在,创建一个 keys.js 文件并将 mongourl 保存在那里,如下所示:
让我们将刚刚创建的服务器连接到我们的数据库。
为此,我们必须使用 mongoose.connect() 方法,如下所示:
如果初始连接失败,Mongoose 将发出一个 ‘error’ 事件,并且承诺 mongoose.connect() 返回将拒绝。
Mongoose.connect 将与提到的 url 建立连接,我们将使用 mongoose.connection.on() 方法检查连接。
当您进入命令行时,您将看到正在连接到数据库的消息。
恭喜👍🤩!您刚刚将服务器连接到数据库。
定义模式
现在,下一步是创建数据库模式。我们将在 Mongoose.Schema() 的帮助下创建一个数据库模式。
创建一个文件夹 models 并在该文件夹中创建一个名为 user.js 的文件。它将包含我们的用户 model/schema 。
您需要创建一个新模式并定义您希望为用户提供的各种字段。例如,在用户模式中,您将有一个字段作为名称,然后您需要定义其类型和其他内容,例如必需的、唯一的或任何默认值。最后,您必须使用 mongoose.model 创建该模式的模型,该模型采用参数名称和它指向的模式。
创建注册路线
我们将为注册页面创建路由,用户将从前端发送带有数据的发布请求,并且该数据将保存在我们的数据库中。REST Api 端点中使用了四种主要的 HTTP 方法:
- GET :GET 请求是 API 和网站中最常见和广泛使用的方法。简单地说,GET 方法用于从指定资源的服务器检索数据。
- POST :在 Web 服务中,POST 请求用于将数据发送到 API 服务器以创建或更新资源。发送到服务器的数据存储在 HTTP 请求的请求正文中。
- DELETE :DELETE 方法就像它听起来的那样:删除指定 URL 处的资源。此方法是 RESTful API 中较常见的方法之一,因此最好了解它的工作原理。
- PUT :与 POST 类似,PUT 请求用于向 API 发送数据以更新或创建资源。不同之处在于 PUT 请求是幂等的。也就是说,多次调用同一个 PUT 请求总是会产生相同的结果。相反,重复调用 POST 请求会产生多次创建相同资源的副作用。
我们将向注册路由发送发布请求,以便我们的数据保存/发布到我们的数据库中。路由是指应用程序的端点 (URI) 如何响应客户端请求。
您使用与 HTTP 方法对应的 Express 应用程序对象的方法定义路由;例如,app.get() 处理 GET 请求和app.post处理 POST 请求。
应用程序“监听”与指定路由和方法匹配的请求,当它检测到匹配时,它调用指定的回调函数。路由路径与请求方法相结合,定义了可以发出请求的端点。路由路径可以是字符串、字符串模式或正则表达式。
为路由创建一个文件夹和一个用于创建路由的文件。需要包并在 express.Router() 的帮助下创建路由。
const express=require('express');
const router=express.Router();
const mongoose=require("mongoose")
const User=mongoose.model("User")
router.get('/signup',(req,res)=>{
res.send("hello");
})
module.exports=router
在上面的代码中,在 localhost:5000/signup 设置了一个路由,当我们向上面的路径发送一个 get 请求时,它里面的代码就会运行。
需要我们 app.js 中的文件并使用 app.use() 创建一个中间件。此外,使用 express.json() 将该数据转换为 json 对象。在这里,我在路由文件夹中的文件中的 auth.js。
在这种情况下,你好会印在屏幕上,如下所示:
如果这显示在您的浏览器上,那么您已经成功创建了一个注册路径。现在,是时候为该路由创建一个发布请求了。添加以下代码以创建发布请求。
router.post('/signup',(req,res)=>{
var {name,email,password}=req.body
console.log(req.body)
if(!email || !password || !name)
{
return res.status(422).json({error:"Add all data"})
}
return res.status(200).json({message:"DONE !"})
})
我们将通过 Postman 发送要发布的数据。这是教程。通过 post 请求发送到服务器的数据存储在请求的正文中,我们可以使用 req.body() 访问该数据。我们发送了一个 json 数据,例如:
发送请求后,我们需要使用 {} 解构该数据。
var {名称、电子邮件、密码}=req.body
这基本上从 body 获取数据并保存到相应的变量中。如果该字段中的任何一个字段不可用,则它将发送状态为 422 的错误消息。
在 postman 中,尝试使用 body 中的 json 数据向 localhost:5000/signup 发送 post 请求。您将在 postman 中看到以下 DONE 消息。
现在,由于我们可以访问数据,我们将把它保存到我们的数据库中。为此,我们将首先检查是否存在具有相同邮件的用户。如果它不存在,我们将创建一个用户(模型)类型的对象,其中包含我们已经解构的数据。
之后,使用 User.save() 保存用户。一旦执行,它将返回一个错误,我们将在 catch 博客中捕获该错误,或者返回已保存的用户。我们将使用 .then 进行检查,并使用 catch 块来捕获任何类型的错误。如果该邮件的数据存在,则会显示错误。
完整代码是:
const express=require('express');
const router=express.Router();
const mongoose=require("mongoose")
const User=mongoose.model("User")
router.get('/signup',(req,res)=>{
res.send("hello");
});
router.post('/signup',(req,res)=>{
var {name,email,password}=req.body
console.log(req.body)
if(!email || !password || !name)
{
return res.status(422).json({error:"Add all data"})
}
User.findOne({email:email})
.then((savedUser)=>{
if(savedUser){
return res.status(422).json({error:"User already exists with that email"})
}
const user=new User({
email,
password,
name,
})
user.save()
.then((user)=>{
res.json({message:"Saved Successfully"})
console.log(user.email)
})
.catch((err)=>{
console.log(err)
})
})
.catch((err)=>{
console.log(err)
})
})
module.exports=router
现在,当您从 Postman 发送请求时,数据将保存在我们的数据库中。保存数据后,消息将显示在我们的 Postman 中。
你可以查看Mongodb Atlas中的文档,你的数据会有一个文档。如果你能看到那么非常祝贺你。您已成功将数据发布到您的数据库😍🤩。