vue登陆修改密码等加密(禁止明文传输)

1.下载加密插件,终端运行

yarn add jsencrypt

2.配置加密信息文件rsaEncrypt.js放到utils中,代码如下

import JSEncrypt from 'jsencrypt/bin/jsencrypt'

// 密钥对生成网址 http://web.chacuo.net/netrsakeypair

const publicKey = 'MIGfMA0GCSqGSIb3DQEBxxxxxxxxxxxx'

const privateKey = 'MIICdgIBADANBgxxxxxxxxx'

// 加密方法
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对需要加密的数据进行加密
}

// 解密方法
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey)
  return encryptor.decrypt(txt)
}

3.登陆 ,修改密码等地方使用,注意后端也要对应配置

import { encrypt } from "@utils/rsaEncrypt";  


const toLogin = ()=>{

proxy.$refs.loginFormRef.validate((valid) => {
    const form = {
      account: loginForm.account,
      password: encrypt(loginForm.password),
      rememberMe: loginForm.rememberMe,
      code: loginForm.code,
      uuid: loginForm.uuid,
    };
    if (valid) {
      state.loading = true;
      userStore
        .login(form)
        .then(() => {
          state.loading = false;
          router.push({ path: proxy.$route.query?.redirect || "/index" });
        })
        .catch(() => {
          state.loading = false;
          getCode();
        });
    }
  });
}
相关推荐
Vicky&James4 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233647 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟16 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386316 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596017 分钟前
前端代理,解决跨域问题讲解
前端
quitv22 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238131 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星33 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端