uni-app项目实现用户注册前端页面密码加密

2,082 阅读1分钟

uni-app项目使用crypto.js实现注册用户密码加密

一、HBuilder 安装 crypto-js.js

视图==>显示终端==> cd 进入项目根目录, 例如:demo\test_vue 一般打开终端默认是项目根目录

输入 npm install crypto-js安装

image.png

安装完成查看项目根目录

image.png

view页面
<uni-easyinput prefixIcon="phone" v-model="form.name" :inputBorder="false"placeholderStyle="font-size:30rpx" type="text" placeholder="用户名"></uni-easyinput>
<uni-easyinput prefixIcon="locked" v-model="form.password" :inputBorder="false"placeholderStyle="font-size:30rpx" type="password" placeholder="登录密码"></uni-easyinput>

二、在utils文件夹下新建crypto.js

import CryptoJS from '../node_modules/crypto-js/crypto-js.js'
// 加密
const keyStr = 'demo' // 解密用的key
export function encrypt (word) {
  const time = Date.now()

  const key = CryptoJS.enc.Utf8.parse(keyStr)
  const srcs = CryptoJS.enc.Utf8.parse(time + word) // 加密方式: 时间戳 + 密文
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7})
  return encrypted.toString()
}

<script>
//引入定义好的js
import { encrypt } from '../../utils/crypto.js'
    export default {
	data() {
            return {
		name: '', // 账号
		password: '', // 密码
	};
},
register(){
    	uni.request({
		url: "xxxx",//请求接口			
		method: 'get',
		dataType: 'json',
		data: {
                    userName: this.name,
                    //具体用法:调用import 的js方法实现加密
                    passWord: encrypt(this.password),
		},
		success: (res) => {
                 //注册成功吃操作
             })
	}
    },
    /**
     * 去登陆
     */
        toLogin: function() {
                uni.navigateTo({
                        url: "/pages/login/login"
                });
        },

        /**
         * 回到首页
         */
        toIndex: function() {
                uni.switchTab({
                        url: '/pages/index/index'
             });
            }
        }
      }
    }
<script>