全栈技术博客-文章详情

react+koa进行登录注册密码加密解密和存储数据库操作

最后更新时间：2025-08-28 03:10:55

crypto cryptojs

## 一、前端加密
前端安装`crypto-js`
```js
npm install crypto-js --save
```
封装加密方法
```js
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));
}
```
使用，引入刚才创建的这个加密的方法
```js
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的语法
```js
 let passwd = tool.decrypt(query.password);  --进行解密操作，当然解密的密匙要跟前端一致
 
```
### 1、一般用node写后端的话，这直接写一个中间件即可
```js
安装 npm install cryptp --save
```

首先我们肯定要封装一个加密的文件，我们命名为password-handle.js
```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
```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
	}
```        
使用 
```js
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,
      };
    }
  }
 }
```

react+koa进行登录注册密码加密解密和存储数据库操作

留言条数·0