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

    一.主要内容

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

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

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

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

    二.MongoDB数据库配置及连接

    1.配置

    推荐看大佬写的

    MongoDBicon-default.png?t=N7T8http://t.csdn.cn/f2yzh

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

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

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

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

    2.下载mongoose

    npm i mongoose

    3.database.js

    1. const mongoose = require('mongoose'); 	
    2.  
    3. const connect='mongodb://数据库用户名:数据库用户密码@127.0.0.1:27017/数据库名'
    4. mongoose.connect(connect, {
    5.   useNewUrlParser: true,
    6.   useUnifiedTopology: true,
    7. });
    8. //创建实例
    9. const db = mongoose.connection;
    10. //数据库连接
    11. db.on('error', console.error.bind(console, '连接错误：'));
    12. db.once('open', function () {
    13.   console.log('成功连接到数据库');
    14. });
    15.  
    16. //定义用户模型
    17. ...
    18.  
    19. // 关闭连接（在程序退出时）
    20. process.on('SIGINT', async function () {
    21.     try {
    22.       await mongoose.connection.close();
    23.       console.log('数据库连接已关闭');
    24.       process.exit(0);
    25.     } catch (error) {
    26.       console.error('关闭数据库连接时出错：', error);
    27.       process.exit(1);
    28.     }
    29.   });
    30.  
    31. module.exports = {db}

    4.创建用户模型

    用户信息包括

    _id:数据库自动生成

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

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

    password:密码,加密

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

    安装bcrypt,一种加密算法

    npm i bcrypt
    1. ...连接
    2.  
    3. // 定义用户模型
    4. const userSchema = new mongoose.Schema({
    5.     username:{type:String, unique:true}, //唯一,防止命名重复
    6.     password:{type:String, set(val) //val是需要加密的值
    7.       {
    8.         return require('bcrypt').hashSync(val,10) //10加密强度
    9.       }
    10.     },  //加密
    11.     email:{type:String,unique:true},
    12.  
    13.   });
    14.  
    15.   // 添加新的属性---如果后续有新的属性加入没有可以省略
    16.   //userSchema.add({
    17.   //  avatar_url: {type:String}
    18.   //});
    19.  
    20.   //创建用户模型(集合)
    21.   const User = mongoose.model('User', userSchema); 
    22.  
    23. ...关闭连接
    24.  
    25. module.exports = {db,User}

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

    三.后端搭建

    1.安装第三方包

    1. npm install express --save
    2.  
    3. npm i body-parser
    4.  
    5. npm i cors

    2.index.js

    1. const express = require('express')
    2. const  router = require('./router'); 		
    3. const bodyParser = require('body-parser')		
    4. const cors = require('cors');			
    5. const app = express()
    6.  
    7. app.use(cors()) //跨域处理
    8. app.use(bodyParser.json())	 //解析请求体
    9.  
    10. // 使用路由文件
    11. app.use('/',router);
    12.  
    13.  
    14. app.listen(3000, () => {
    15.     console.log('server running ...');
    16. })

    3.router.js

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

    Vue+NodeJS实现邮件发送icon-default.png?t=N7T8http://t.csdn.cn/OWAgl

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

    1. //发送邮件
    2.   router.get('/getemail', async (req, res) => {
    3.     try {
    4.       const { mail } = req.query;
    5.   
    6.       // 验证邮箱是否存在
    7.       const email = await User.findOne({ email: mail });
    8.       if (email) {
    9.         return res.status(422).json({ message: '邮箱存在账号' });
    10.       }
    11.   
    12.      // 随机验证码
    13.   
    14.      // 将code存入缓存
    15.      
    16.      //发送邮件
    17.  
    18.     } catch (error) {
    19.      
    20.   });

    安装jsonwebtoken

    npm i jsonwebtoken

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

    Vue+NodeJS上传图片到腾讯云Cosicon-default.png?t=N7T8http://t.csdn.cn/cwN0N

    1. const express = require('express');
    2. const router = express.Router();
    3. const bcrypt = require('bcrypt');
    4. const jwt = require('jsonwebtoken');
    5. const {User,db}=require('./database');	
    6.  
    7. const SECRET=*******... //密钥,鉴权登录的时候来解析token
    8.  
    9. //注册
    10.  
    11.  
    12. //登录
    13.  
    14.  
    15. //鉴权登录
    16.  
    17.  
    18. //邮件发送
    19.  
    20. module.exports = router
    3-1.注册

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

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

    1.  
    2. //用户注册
    3. router.post('/register',async(req,res)=>{
    4.  
    5.     // 获取缓存---邮箱验证码
    6.    let cachedValue = myCache.get("code");
    7.     
    8.    //解构出来前端传过来的信息
    9.    let {code,username,password,email}=req.query.info
    10.  
    11.     if(!cachedValue){
    12.         return res.status(422).send({ message: '验证码过期' });
    13.     }
    14.     if(code!=cachedValue){
    15.         return res.status(422).send({ message: '验证码输入错误' });
    16.     }
    17.   try {
    18.     // 验证成功后,插入数据
    19.     const user = await User.create({
    20.       username: username,
    21.       password: password,
    22.       email: email,
    23.     });
    24.  
    25.     myCache.del("code");
    26.     
    27.     //将用户信息发送给前端
    28.     res.send(user);
    29.  
    30.   } catch (error) {
    31.     console.error(error);
    32.     res.status(422).send({
    33.       message: '该用户已经存在'
    34.     });
    35.   }
    36.  
    37. })
    3-2.登录

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

    1. //用户登录
    2. router.post('/login', async (req, res) => {
    3.   try {
    4.  
    5.     let { username, password } = req.query.info;
    6.     // 查询用户是否存在
    7.     const user = await User.findOne({ username });
    8.     // 用户名不存在
    9.     if (!user) {
    10.       return res.status(422).json({ message: '用户名不存在' });
    11.     }
    12.     // 校验密码
    13.     //true或false
    14.     const isPasswordValid = bcrypt.compareSync(password, user.password);
    15.  
    16.     if (!isPasswordValid) {
    17.       return res.status(422).json({ message: '密码无效' });
    18.     }
    19.  
    20.     // 生成 JWT
    21.     const token = jwt.sign({ id: String(user._id) }, SECRET); //密钥
    22.  
    23.     res.json({ //发送json数据
    24.       user,
    25.       token
    26.     });
    27.   } catch (error) {
    28.     console.log(error)
    29.   }
    30.  
    31. })
    3-3.鉴权登录

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

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

    1. //用户鉴权
    2. router.get('/profile',async(req,res)=>{
    3.   try {
    4.   
    5.     const rawToken = String(req.headers.authorization).split(' ').pop();
    6.  
    7.     const { id } = jwt.verify(rawToken, SECRET);
    8.  
    9.  
    10.     const user = await User.findById(id);
    11.     if (!user) {
    12.       return res.status(404).json({ message: '用户不存在' });
    13.     }
    14.  
    15.     res.json({user}); // 使用 .json() 方法发送 JSON 数据
    16.   } catch (error) {
    17.    console.log(error)
    18.   }
    19. })

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

    四.Vue前端

    1.封装axios

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

    1-1.http.js
    1. import axios from "axios";
    2.  
    3. const http = axios.create({
    4.   baseURL: 'http://127.0.0.1:3000', // 注意这里的双斜杠
    5.   timeout: 5000
    6. });
    7.  
    8. // 请求拦截器
    9. http.interceptors.request.use(config => {
    10.   return config;
    11. }, error => {
    12.   return Promise.reject(error);
    13. });
    14.  
    15. // 响应拦截器
    16. http.interceptors.response.use(response => {
    17.   return response.data;
    18. }, error => {
    19.   return Promise.reject(error);
    20. });
    21.  
    22. export default http;
    1-2.api.js
    1. import http from './http';
    2.  
    3. //注册
    4. export async function registerAPI(info) {
    5.  
    6.     const response = await http({
    7.       url: 'register',
    8.       method:'post',
    9.       params: {info}
    10.     });
    11.  
    12.     return response; // 返回响应数据
    13.    
    14. }
    15.  
    16. //登录
    17. export async function loginAPI(info) {
    18.  
    19.     const response = await http({
    20.       url: 'login',
    21.       method:'post',
    22.       params: {info}
    23.     });
    24.     return response; // 返回响应数据
    25.   
    26. }
    27.  
    28. //鉴权登录
    29. export async function getTokenAPI(config) {
    30.  
    31.   const response = await http({
    32.     url: 'profile',
    33.     method:'get',
    34.     // 自定义请求头
    35.     headers:{authorization:config.authorization}
    36.   });
    37.  
    38.   return response; // 返回响应数据
    39.  
    40. }
    41.  
    42. //邮箱

    2.请求

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

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

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

    2-1.发送邮件

    ...

    2-2.注册
    1. import {registerAPI} from './api'
    2.  
    3. ...
    4.  
    5. // 注册
    6.  function signUp(){
    7. //去除空格
    8. ...
    9. //判断是否为空
    10. ...
    11.  
    12. let registerInfo={
    13.     username:username.value,
    14.     password:password.value,
    15.     email:email.value,
    16.     code:code.value
    17.   }
    18.  
    19.   registerAPI(registerInfo)
    20.     .then(response => {
    21.       console.log('Register successful:', response);
    22.     })
    23.     .catch(error => {
    24.       // 处理错误
    25.       console.log(error)
    26.     });
    27.  
    28. }
    2-3.登录

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

    1. import {loginAPI} from './api'
    2. import useCookie from './Cookie';
    3. const { setCookie } = useCookie();
    4.  
    5. ...
    6.  
    7.  
    8. //登录
    9. function SignIn(){
    10. //去除空格
    11. username.value=username.value.replace(/\s/g, '')
    12. password.value=password.value.replace(/\s/g, '')
    13.  
    14. //判断是否为空
    15. if(username.value==''||password.value==''){
    16.   console.log('格式不正确')
    17. }else{
    18. const loginInfo={username:username.value,password:password.value}
    19.   loginAPI(loginInfo)
    20.   .then(response => {
    21.     setCookie('token', response.token, 0.5); // 存储30分钟
    22.     console.log(response)
    23.   })
    24.   .catch(error => {
    25.     // 处理错误
    26.     console.log(error)
    27.   });
    28. }
    29.  
    30. }

     

    2-4.Cookie封装        
    1.  
    2. export default function useCookie() {
    3.  
    4. //获取Cookie
    5.   const getCookie = (name) => {
    6.     const value = `; ${document.cookie}`;
    7.     const parts = value.split(`; ${name}=`);
    8.     
    9.     if (parts.length === 2) {
    10.       return parts.pop().split(';').shift();
    11.     }
    12.   };
    13.   
    14. //设置Cookie
    15.   const setCookie = (name, value, hours) => {
    16.     const date = new Date();
    17.     date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
    18.     const expires = `expires=${date.toUTCString()}`;
    19.     
    20.     document.cookie = `${name}=${value}; ${expires}; path=/`;
    21.   };
    22.   
    23. //销毁Cookie
    24.   const deleteCookie=(name)=>{
    25.     // 将Cookie的过期时间设置为过去的日期
    26.     document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    27.   }
    28.  
    29.  
    30.   return {
    31.     getCookie,
    32.     setCookie,
    33.     deleteCookie
    34.   };
    35. }

    2-5.鉴权登录
    1. import {getTokenAPI} from './api'
    2. import useCookie from './Cookie';
    3. const { getCookie } = useCookie();
    4.  
    5. ...
    6.  
    7. onMounted( async()=>{
    8. // 读取Token
    9. const Token = getCookie('token');
    10. const config = {
    11.    authorization: `Bearer ${Token}`, // 设置Bearer Token
    12.  };
    13.  
    14.   // 发送需要Token的请求
    15. await getTokenAPI(config)
    16.     .then(response => {
    17.       // 处理响应数据
    18.      console.log(response)
    19.     })
    20.     .catch(error => {
    21.       // 处理错误
    22.       console.log(error)
    23.     });
    24. })

    至此前端页面完成.

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

    这里的token设置存在bug,没有真正的销毁token.有时间改正,有熟悉的大佬可以评论留言,给出好的解决办法.感谢!

  • 相关阅读:
    python学习-7-异常 错误 调试 测试
    centos7.6升级openssh9.3p1,openssl1.1.1t
    java-php-python-智能道路交通管理系统计算机毕业设计
    ITSS信息技术服务运行维护标准符合性证书申请详解及流程
    linux修改打开文件数限制open file limit
    1.6.C++项目：仿muduo库实现并发服务器之channel模块的设计
    Lite-Mono(CVPR2023)论文解读
    R语言使用lubridate包处理日期和时间数据实战
    小迪安全笔记（3）——基础入门3、基础入门4
    react中使用腾讯地图
  • 原文地址：https://blog.csdn.net/m0_71469120/article/details/132707591