react+koa如何进行登录时密码的加密解密和存储到数据库

简介: react+koa如何进行登录时密码的加密解密和存储到数据库

一、前端加密


前端安装crypto-js


npm install crypto-js --save


封装加密方法


import CryptoJS from 'crypto-js'  --引入js
import { SECRETKEY } from '../config/secret' --引入加密的密匙
采用AES对称加密方法:
/**
 * 加密函数,加密同一个字符串生成的都不相同
 * @param {*} str 
 */
export function encrypt(str) {
    return CryptoJS.AES.encrypt(JSON.stringify(str), SECRETKEY).toString();
}
/**
 * 解密函数
 * @param {*} str 
 */
export function decrypt(str) {
    const bytes = CryptoJS.AES.decrypt(str, SECRETKEY);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}


使用,引入刚才创建的这个加密的方法


import { encrypt } from "../../../utils/util";
 onSubmit = () => {
        this.props.form.validateFields((errors, values) => {
            if (!errors) {
                //this.onLogin(values)
                 values.password = encrypt(values.password); --进行加密
                 this.post(`${this.api.login.login}`, values).then((res) => {
                   if (res.data.code == 200) {
                     message.success(res.data.message);
                     sessionStorage.setItem("blogUser", values.username);
                     sessionStorage.setItem("menuItmeKey", "0");
                     const action = updateinfo(res.data.data);
                     store.dispatch(action);
                     sessionStorage.setItem("token",res.data.token);
                   }else{
                    message.warning(res.data.message);
                   }
                 }).catch((res)=>{
                     message.warning(res.data.message);
                 });
            }
        });
    }


二、koa后端进行解密再加密存储到数据库


后端也需要安装crypto-js,方法痛前端一样,


不过koa是基于commonjs的语法,因此使用上不能用es6的语法


let passwd = tool.decrypt(query.password);  --进行解密操作,当然解密的密匙要跟前端一致


1、一般用node写后端的话,这直接写一个中间件即可


安装 npm install cryptp --save


首先我们肯定要封装一个加密的文件,我们命名为password-handle.js


const crypto = require('crypto');
  const md5password = (password) => {
    const md5 = crypto.createHash('md5');
    const result = md5.update(password).digest('hex'); //hex表示拿到最终为十六进制
    return result;
  }
  module.exports = md5password;


2、然后创建我们的中间件,命名为auth_middleware.js


const md5password = require('../utils/password-handle');
  const handlePassword = async (ctx,next) =>{
    let { password }  = ctx.request.body;
    ctx.request.body.password = md5password(password);
    await next();
  }
  module.exports = {
    handlePassword
  }


使用


const UserModule = require('../modules/users')
const md5password = require("../utlis/password-handle");
const jwt = require("jsonwebtoken")
const keys = require("../config/keys")
const tool =  require("../utlis/index");
class UserControler {
  static async adduser(ctx) { //注册
    const query = ctx.request.body;
    let passwd = tool.decrypt(query.password);  --解密操作
    query.password = md5password(passwd);       --重新加密
    try {
      let sqlt = { 
        username: query.username,
      };
      const result = await UserModule.userLogin(sqlt);
      if (result.length > 0) {
        ctx.response.status = 200;
        ctx.body = {
          code: 201,
          message: "该用户已存在,请勿重复注册",
        };
      } else {
        const data = await UserModule.addUsers(query);
        if (data) {
          const payload = {
            userNumber: data.username,
            time: new Date().getTime(),
            timeout: 1000 * 60 * 60 * 2,
          };
          const token = jwt.sign(payload, keys.secretOrkey, {
            expiresIn: 3600,
          });
          ctx.response.status = 200;
          ctx.body = {
            code: 200,
            token: token,
            data: {
              username: data.username,
              user_id: data.user_id,
              roleType: data.roleType,
              token: token,
            },
            message: "登陆成功",
          };
        } else {
          ctx.response.status = 200;
          ctx.body = {
            code: 400,
            message: "注册失败",
          };
        }
      }
    } catch (err) {
      ctx.response.status = 412;
      ctx.body = {
        code: 412,
        msg: "error",
        err,
      };
    }
  }
 }


相关文章
|
7月前
|
存储 算法 前端开发
如何使用 Vuex 插件来实现状态的加密存储?
如何使用 Vuex 插件来实现状态的加密存储?
355 124
|
9月前
|
存储 Oracle 关系型数据库
服务器数据恢复—光纤存储上oracle数据库数据恢复案例
一台光纤服务器存储上有16块FC硬盘,上层部署了Oracle数据库。服务器存储前面板2个硬盘指示灯显示异常,存储映射到linux操作系统上的卷挂载不上,业务中断。 通过storage manager查看存储状态,发现逻辑卷状态失败。再查看物理磁盘状态,发现其中一块盘报告“警告”,硬盘指示灯显示异常的2块盘报告“失败”。 将当前存储的完整日志状态备份下来,解析备份出来的存储日志并获得了关于逻辑卷结构的部分信息。
|
10月前
|
存储 关系型数据库 数据库
高性能云盘:一文解析RDS数据库存储架构升级
性能、成本、弹性,是客户实际使用数据库过程中关注的三个重要方面。RDS业界率先推出的高性能云盘(原通用云盘),是PaaS层和IaaS层的深度融合的技术最佳实践,通过使用不同的存储介质,为客户提供同时满足低成本、低延迟、高持久性的体验。
|
12月前
|
SQL 存储 分布式数据库
分布式存储数据恢复—hbase和hive数据库数据恢复案例
分布式存储数据恢复环境: 16台某品牌R730xd服务器节点,每台服务器节点上有数台虚拟机。 虚拟机上部署Hbase和Hive数据库。 分布式存储故障: 数据库底层文件被误删除,数据库不能使用。要求恢复hbase和hive数据库。
425 12
|
存储 SQL NoSQL
【赵渝强老师】达梦数据库的逻辑存储结构
本文介绍了达梦数据库的存储结构,包括逻辑和物理存储两部分。逻辑存储结构由数据库(Database)、表空间(Tablespaces)、段(Segments)、簇(Cluster)和页(Page)组成。数据库是最大逻辑单元,包含所有表、索引等;表空间由数据文件组成,用于存储对象;段由簇构成,簇包含连续的数据页;页是最小存储单元。文中还提供了查询表空间、段和页大小的SQL语句,并附有视频讲解和示意图。
460 7
|
存储 SQL 安全
【赵渝强老师】达梦数据库的物理存储结构
本文介绍了达梦数据库的存储结构及各类物理文件的作用。达梦数据库通过逻辑和物理存储结构管理数据,包含配置文件(如dm.ini、sqllog.ini)、控制文件(dm.ctl)、数据文件(*.dbf)、重做日志文件(*.log)、归档日志文件、备份文件(*.bak)等。配置文件用于功能设置,控制文件记录数据库初始信息,数据文件存储实际数据,重做日志用于故障恢复,归档日志增强数据安全性,备份文件保障数据完整性,跟踪与事件日志辅助问题分析。这些文件共同确保数据库高效、稳定运行。
551 0
|
存储 人工智能 监控
时序数据库 TDengine 化工新签约:存储降本一半,查询提速十倍
化工行业在数字化转型过程中面临数据接入复杂、实时性要求高、系统集成难度大等诸多挑战。福州力川数码科技有限公司科技依托深厚的行业积累,精准聚焦行业痛点,并携手 TDengine 提供高效解决方案。
250 0
|
6月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
11月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
375 68