vue项目 登录页面从取数据回显在登录表单中

 

vue项目登录页面从取数据回显在登录表单中

由于登录密码在存储时是做了加密操作，所求取数据时需要解密

//页面需引入加密解密的方法
created() {
    this.getCookie();
  },
methods: {
  getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");

      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },

}

解密解密模块封装,使用到jsencrypt插件，使用前需要npm安装，方法自行百度。公钥和私钥是问后端要的

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

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

const publicKey = '[公钥]'

const privateKey = '[私钥]'

// 加密
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) // 对数据进行解密
}