Vue+NodeJS+MongoDB实现邮箱验证注册、登录

这篇具有很好参考价值的文章主要介绍了Vue+NodeJS+MongoDB实现邮箱验证注册、登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.主要内容

  • 邮件发送
  • 用户注册
  • 用户信息存储到数据库
  • 用户登录
  • 密码加密
  • JWT生成token
  • Cookie实现快速登录

在用户注册时,先发送邮件得到验证码.后端将验证进行缓存比对,如果验证码到期,比对不正确,拒绝登录;如果比对正确,将用户的信息进行加密存储到数据库.

用户登录时,先通过用户名去数据库查询是否存在该用户,如果不存在发送信息提示前端,如果存在.将用户输入的密码和将数据库中解密成功后的密码进行比对.如果成功,将用户的唯一id生成token与用户的信息一起发送给前端.前端将token存入Cookie中.

在一定时间内,用户第二次登录时.先去获取Cookie,将token解析出来,发送给后端,后端进行token解密,得到用户的id,通过id去数据库查询用户数据,并返回给前端.

二.MongoDB数据库配置及连接

1.配置

推荐看大佬写的

MongoDBhttp://t.csdn.cn/f2yzh

版本推荐4以上,这里使用的是4.4.23

配置好后,我们创建一个数据库,为这个数据库添加一个用户.

db.createUser({user:"用户名", pwd: "用户密码", roles: [{role: "dbOwner", db: "数据库名"}]})

我们接下来连接这个数据库.

2.下载mongoose

npm i mongoose

3.database.js

const mongoose = require('mongoose'); 	

const connect='mongodb://数据库用户名:数据库用户密码@127.0.0.1:27017/数据库名'
mongoose.connect(connect, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
//创建实例
const db = mongoose.connection;
//数据库连接
db.on('error', console.error.bind(console, '连接错误:'));
db.once('open', function () {
  console.log('成功连接到数据库');
});

//定义用户模型
...

// 关闭连接(在程序退出时)
process.on('SIGINT', async function () {
    try {
      await mongoose.connection.close();
      console.log('数据库连接已关闭');
      process.exit(0);
    } catch (error) {
      console.error('关闭数据库连接时出错:', error);
      process.exit(1);
    }
  });

module.exports = {db}

4.创建用户模型

用户信息包括

_id:数据库自动生成

username:用户名,唯一不可出现同样的用户名,

email:邮箱名,唯一不可出现同样的邮箱名,

password:密码,加密

...其他属性可以自定义添加

安装bcrypt,一种加密算法

npm i bcrypt
...连接

// 定义用户模型
const userSchema = new mongoose.Schema({
    username:{type:String, unique:true}, //唯一,防止命名重复
    password:{type:String, set(val) //val是需要加密的值
      {
        return require('bcrypt').hashSync(val,10) //10加密强度
      }
    },  //加密
    email:{type:String,unique:true},

  });

  // 添加新的属性---如果后续有新的属性加入没有可以省略
  //userSchema.add({
  //  avatar_url: {type:String}
  //});

  //创建用户模型(集合)
  const User = mongoose.model('User', userSchema); 

...关闭连接

module.exports = {db,User}

至此数据库的配置连接就完成了

三.后端搭建

1.安装第三方包

npm install express --save

npm i body-parser

npm i cors

2.index.js

const express = require('express')
const  router = require('./router'); 		
const bodyParser = require('body-parser')		
const cors = require('cors');			
const app = express()

app.use(cors()) //跨域处理
app.use(bodyParser.json())	 //解析请求体

// 使用路由文件
app.use('/',router);


app.listen(3000, () => {
    console.log('server running ...');
})

3.router.js

邮件发送我以及分离出来了,可以借鉴我的这篇博客.与这篇博客是对接上的.

Vue+NodeJS实现邮件发送http://t.csdn.cn/OWAgl

 唯一要修改的地方就是,一个邮箱注册一个账号,你也可以自定义多少个

//发送邮件
  router.get('/getemail', async (req, res) => {
    try {
      const { mail } = req.query;
  
      // 验证邮箱是否存在
      const email = await User.findOne({ email: mail });
      if (email) {
        return res.status(422).json({ message: '邮箱存在账号' });
      }
  
     // 随机验证码
  
     // 将code存入缓存
     
     //发送邮件
 
    } catch (error) {
     
  });

安装jsonwebtoken

npm i jsonwebtoken

 一些数据密钥可以存储在一个.env文件中,可以参考这篇博客

Vue+NodeJS上传图片到腾讯云Coshttp://t.csdn.cn/cwN0N

const express = require('express');
const router = express.Router();
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const {User,db}=require('./database');	

const SECRET=*******... //密钥,鉴权登录的时候来解析token

//注册


//登录


//鉴权登录


//邮件发送

module.exports = router
3-1.注册

注册前,我们先发送邮件得到验证码,将验证码缓存.再请求注册接口的时候,先验证验证码的准确性.

如果错误或者过期了,不进行注册.


//用户注册
router.post('/register',async(req,res)=>{

    // 获取缓存---邮箱验证码
   let cachedValue = myCache.get("code");
    
   //解构出来前端传过来的信息
   let {code,username,password,email}=req.query.info

    if(!cachedValue){
        return res.status(422).send({ message: '验证码过期' });
    }
    if(code!=cachedValue){
        return res.status(422).send({ message: '验证码输入错误' });
    }
  try {
    // 验证成功后,插入数据
    const user = await User.create({
      username: username,
      password: password,
      email: email,
    });

    myCache.del("code");
    
    //将用户信息发送给前端
    res.send(user);

  } catch (error) {
    console.error(error);
    res.status(422).send({
      message: '该用户已经存在'
    });
  }

})
3-2.登录

这里我们是将用户的唯一_id生成token发给前端,前端将token存储到Cookie中,下次登录的时候将token发送给鉴权接口,读取token得到用户的_id.通过_id去查询数据库,得到用户的信息,实现登录.我们给Cookie设置时效性,在一定时间内,快速登录.

//用户登录
router.post('/login', async (req, res) => {
  try {

    let { username, password } = req.query.info;
    // 查询用户是否存在
    const user = await User.findOne({ username });
    // 用户名不存在
    if (!user) {
      return res.status(422).json({ message: '用户名不存在' });
    }
    // 校验密码
    //true或false
    const isPasswordValid = bcrypt.compareSync(password, user.password);

    if (!isPasswordValid) {
      return res.status(422).json({ message: '密码无效' });
    }

    // 生成 JWT
    const token = jwt.sign({ id: String(user._id) }, SECRET); //密钥

    res.json({ //发送json数据
      user,
      token
    });
  } catch (error) {
    console.log(error)
  }

})
3-3.鉴权登录

由于官方的规范,前端传过来的token格式是

Vue+NodeJS+MongoDB实现邮箱验证注册、登录,vue.js,前端,javascript,mongodb,node.js,算法

所以将authorization切成两部分,取后面

//用户鉴权
router.get('/profile',async(req,res)=>{
  try {
  
    const rawToken = String(req.headers.authorization).split(' ').pop();

    const { id } = jwt.verify(rawToken, SECRET);


    const user = await User.findById(id);
    if (!user) {
      return res.status(404).json({ message: '用户不存在' });
    }

    res.json({user}); // 使用 .json() 方法发送 JSON 数据
  } catch (error) {
   console.log(error)
  }
})

至此我们的后端服务搭建完成

四.Vue前端

1.封装axios

这里我们将axios进行封装,多个请求时方便书写

1-1.http.js
import axios from "axios";

const http = axios.create({
  baseURL: 'http://127.0.0.1:3000', // 注意这里的双斜杠
  timeout: 5000
});

// 请求拦截器
http.interceptors.request.use(config => {
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
http.interceptors.response.use(response => {
  return response.data;
}, error => {
  return Promise.reject(error);
});

export default http;
1-2.api.js
import http from './http';

//注册
export async function registerAPI(info) {
 
    const response = await http({
      url: 'register',
      method:'post',
      params: {info}
    });

    return response; // 返回响应数据
   
}

//登录
export async function loginAPI(info) {

    const response = await http({
      url: 'login',
      method:'post',
      params: {info}
    });
    return response; // 返回响应数据
  
}

//鉴权登录
export async function getTokenAPI(config) {

  const response = await http({
    url: 'profile',
    method:'get',
    // 自定义请求头
    headers:{authorization:config.authorization}
  });

  return response; // 返回响应数据
 
}

//邮箱

2.请求

我们先进行输入内容的去空格处理和为空的判断.

如果没有输入邮箱,不能发送邮件.

如果用户名,密码,邮箱,验证码有一项为空,不能注册.

2-1.发送邮件

...

2-2.注册
import {registerAPI} from './api'

...

// 注册
 function signUp(){
//去除空格
...
//判断是否为空
...

let registerInfo={
    username:username.value,
    password:password.value,
    email:email.value,
    code:code.value
  }

  registerAPI(registerInfo)
    .then(response => {
      console.log('Register successful:', response);
    })
    .catch(error => {
      // 处理错误
      console.log(error)
    });

}
2-3.登录

在登录成功后,将token存储到Cookie中,设置存储时间.

import {loginAPI} from './api'
import useCookie from './Cookie';
const { setCookie } = useCookie();

...


//登录
function SignIn(){
//去除空格
username.value=username.value.replace(/\s/g, '')
password.value=password.value.replace(/\s/g, '')

//判断是否为空
if(username.value==''||password.value==''){
  console.log('格式不正确')
}else{
const loginInfo={username:username.value,password:password.value}
  loginAPI(loginInfo)
  .then(response => {
    setCookie('token', response.token, 0.5); // 存储30分钟
    console.log(response)
  })
  .catch(error => {
    // 处理错误
    console.log(error)
  });
}

}

 Vue+NodeJS+MongoDB实现邮箱验证注册、登录,vue.js,前端,javascript,mongodb,node.js,算法

2-4.Cookie封装        

export default function useCookie() {

//获取Cookie
  const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    
    if (parts.length === 2) {
      return parts.pop().split(';').shift();
    }
  };
  
//设置Cookie
  const setCookie = (name, value, hours) => {
    const date = new Date();
    date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
    const expires = `expires=${date.toUTCString()}`;
    
    document.cookie = `${name}=${value}; ${expires}; path=/`;
  };
  
//销毁Cookie
  const deleteCookie=(name)=>{
    // 将Cookie的过期时间设置为过去的日期
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  }


  return {
    getCookie,
    setCookie,
    deleteCookie
  };
}
2-5.鉴权登录
import {getTokenAPI} from './api'
import useCookie from './Cookie';
const { getCookie } = useCookie();

...

onMounted( async()=>{
// 读取Token
const Token = getCookie('token');
const config = {
   authorization: `Bearer ${Token}`, // 设置Bearer Token
 };

  // 发送需要Token的请求
await getTokenAPI(config)
    .then(response => {
      // 处理响应数据
     console.log(response)
    })
    .catch(error => {
      // 处理错误
      console.log(error)
    });
})

至此前端页面完成.

如果有不对或者优化的地方欢迎指正,如果使用时出现了问题,可以留言评论,大家一起解决!

这里的token设置存在bug,没有真正的销毁token.有时间改正,有熟悉的大佬可以评论留言,给出好的解决办法.感谢!文章来源地址https://www.toymoban.com/news/detail-697508.html

到了这里,关于Vue+NodeJS+MongoDB实现邮箱验证注册、登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot整合邮箱验证码实现用户注册

    唠嗑部分 今天我们来分享一下在系统开发过程中,如何使用验证码来验证用户并完成用户注册 首先来看一下成品界面展示 说一下以上注册功能的设计: 用户手动输入用户名(全数据库唯一)、密码、确认密码、邮箱地址(单个邮箱最多可注册3个用户)、正确的邮箱验证码,即可

    2024年02月08日
    浏览(60)
  • JavaWeb登录注册系统/界面(邮箱验证码,数据库连接,详细注释,可作结课作业,可用于学习,可接入其他主系统)

    目录 1、致谢 2、前言 3、系统实机演示 4、系统分析与设计 (1)主要软件与工具 (2)系统分析 (3)系统规划 5、系统设计与构建 (1)JavaWeb创建 (2)JavaWeb运行 (3)先期依赖准备: 6、代码与关键注释、文件简析 (1)数据库 (2)前端 index.jsp和styleIndex.css: forgetPassword

    2024年02月08日
    浏览(53)
  • Vue实现验证码登录

    在我们进行登录的时候,为了保护系统的安全性,也是防止恶意进行登录,进入到后台盗取数据,因此我们在登录的环节进行一定的安全保护,提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验,当然也可以进行多位字符进行校验,在此我使用生

    2024年02月10日
    浏览(38)
  • Vue项目二 登录注册功能的实现

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 环境搭建完,根据管理系统用户需要注册,实现登录然后将用户信息保存在本地中的需求,本章主要实现系统登录注册功能。 首先分析注册页面所要实现的功能,其功能包括账号、昵称、密码和二次确

    2023年04月08日
    浏览(44)
  • SpringBoot+Vue实现简单的登录注册功能

    😶‍🌫️😶‍🌫️😶‍🌫️如果你是一名全干程序员,那前后端跨域问题一定是家常便饭,作者今天带大家写一个最简单的前后端分离登录系统,方便我们理解前后端分离项目的跨域以及数据传输问题。因为要照顾小白,所以我会写的详细一点,不足的地方,大家多多指

    2024年02月04日
    浏览(39)
  • vue+springboot登录与注册功能的实现

     大致效果: 在component目录下新建一个ValidCode.vue: 在登录页引入:  效果图(可以看到多了验证码): 首先准备数据库:  用IDEA创建springboot工程: 创建springboot教程 连接数据库: application.yml: 目录结构: 按照该目录创建文件夹  CorsConfig:解决跨域问题 Result:返回数据

    2024年02月19日
    浏览(38)
  • 微服务系列文章之 Springboot+Vue实现登录注册

    一、springBoot 创建springBoot项目   分为三个包,分别为controller,service, dao以及resource目录下的xml文件。 添加pom.xml 依赖 UserController.java   UserService.java   User.java (我安装了lombok插件)   UserMapper.java   UserMapper.xml   主干配置 application.yaml   数据库需要建相应得到表 1 2 3 4 CREA

    2024年02月13日
    浏览(36)
  • springboot+vue+elementsUI 实现分角色注册登录界面

    一、项目简介 一共分为三个角色:管理员、用户、设计师 登录功能:账号+密码+身份选择,登录成功后跳转到各身份对应的页面 注册功能:只允许用户和设计师注册,用户可以直接注册成功,设计师提交材料后注册需要管理员审核成功后方可注册成功。 注册页面要求必填:

    2024年02月07日
    浏览(40)
  • vue前端实现登录时加验证码

    vue移动端(PC端)图形验证码 vue2-verify 地址:vue2-verify的npmjs地址 安装使用: 支持的验证码类型: 常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进

    2024年02月07日
    浏览(34)
  • SpringBoot+Vue3实现登录验证码功能

    Redis缓存穿透、击穿、雪崩问题及解决方法 Spring Cache的使用–快速上手篇 分页查询–Java项目实战篇 全局异常处理–Java实战项目篇 Java实现发送邮件(定时自动发送邮件)_java邮件通知_心态还需努力呀的博客-CSDN博客 该系列文章持续更新,更多的文章请点击我的主页查看哦!

    2024年02月01日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包