vue登录 滑动验证，记住密码及AES加密解密

已于 2024-01-04 17:41:48 修改
阅读量518 收藏 9
点赞数 7
文章标签： vue.js elementui javascript
于 2024-01-03 14:48:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70265923/article/details/135363657
版权

 相关依赖

npm install js-cookie  //js-cookie
npm install crypto-js  //AES加密解密
npm install -S vue-puzzle-vcode  //滑动验证

 vue2

<template>
  <div class="login">
    <div class="login-box">
      <div class="imgbox">
        <p class="title">安检设备管理系统</p>
      </div>
      <el-form
        ref="ruleForm"
        :rules="loginrules"
        label-width="0px"
        class="login-form"
        :model="loginForm"
      >
        <!-- 账号 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <!-- 记住密码 -->
        <el-checkbox v-model="isRemenber">记住密码</el-checkbox>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 滑动验证功能 -->
    <Vcode
      :show="isVcodeShow"
      @success="successFn"
      @close="isVcodeShow = false"
    />
  </div>
</template>

<script>
//   import { openLoading, closeLoading } from "@/components/loading";
import Vcode from "vue-puzzle-vcode";
import axios from "axios";
import Cookies from "js-cookie";
import CryptoJS from "crypto-js";

export default {
  components: {
    Vcode,
  },
  data() {
    return {
      isRemenber: false, //记住密码
      isVcodeShow: false, // 验证码模态框是否出现
      //表单输入框
      loginForm: {
        username: "",
        password: "",
      },
      //表单验证
      loginrules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 5,
            message: "账号长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const userInformation = Cookies.get("userInformation")
        ? Cookies.get("userInformation")
        : "";
      if (userInformation) {
        // 对密码进行解密
        this.loginForm = this.EncryptionDecryption(false, userInformation);
        // 将是否记住密码置为true
        this.isRemenber = true;
      } else {
        this.loginForm = {
          username: "",
          password: "",
        };
      }
    },
    //重置按钮
    reset() {
      //resetFields 重置为初始值
      this.$refs.ruleForm.resetFields();
    },
    //点击登录
    login() {
      //表单预验证
      //validate对表单进行验证第一个参数是布尔值 第二个参数是对象
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.isVcodeShow = true;
      });
    },
    // 用户通过了验证
    successFn() {
      this.isVcodeShow = false; // 通过验证后，需要手动隐藏模态框
      // openLoading();
      this.callHttp();
    },
    async callHttp() {
      // const { data: res } = await this.$http.post("system/ssologin/Login", {
      //   username: this.loginForm.username,
      //   password: this.loginForm.password,
      // });

      // if (res.msg !== "登录成功") {
      //   //   closeLoading();
      //   return this.$message.error("登录失败，账号或密码不正确");
      // }
      this.$message.success("登录成功");

      // 登录成功后 判断是否选择了勾选密码
      if (this.isRemenber) {
        //将信息加到cookie
        Cookies.set(
          "userInformation",
          this.EncryptionDecryption(true, this.loginForm),
          {
            expires: 30, // 存储30天
          }
        );
      } else {
        // 删除cookie
        Cookies.remove("userInformation");
      }

      //将token加到cookies
      //   Cookies.set("token", res.data.token, {
      //     expires: 30, // 存储30天
      //   });

      //   // closeLoading();
      //   //跳转到home页面
      //   this.$router.push("/home");
    },

    //加密解密方法
    EncryptionDecryption(isEncrypt, data) {
      //秘钥
      let aesKey = "e10adc3949ba59abbe56e057f20f883e";

      //将秘钥转换成Utf8字节数组
      let key = CryptoJS.enc.Utf8.parse(aesKey);

      // 加密参数
      const option = {
        iv: CryptoJS.enc.Utf8.parse(aesKey.substr(0, 16)),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7,
      };

      if (isEncrypt) {
        //加密
        let encrypt = CryptoJS.AES.encrypt(JSON.stringify(data), key, option);
        let encryptData = encrypt.toString();
        return encryptData;
      } else {
        //解密
        let decrypt = CryptoJS.AES.decrypt(data, key, option);
        let decryptData = JSON.parse(decrypt.toString(CryptoJS.enc.Utf8)); //解密后的数据
        return decryptData;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  // background-image: url(../assets/veer-157272718.jpg);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
}
.login-box {
  width: 25%;
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;

  .imgbox {
    text-align: center;
    .title {
      padding: 20px 0;
      font-size: 25px;
      font-weight: 900;
    }
  }
  .login-form {
    width: 100%;
    padding: 0px 25px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

 vue3+ts

<template>
  <div class="login">
    <div class="login-box">
      <div class="imgbox">
        <p class="title">{{ title }}</p>
      </div>
      <el-form
        ref="ruleFormRef"
        :rules="_data.loginrules"
        label-width="0px"
        class="login-form"
        :model="_data.loginForm"
      >
        <!-- 账号 -->
        <el-form-item prop="username">
          <el-input
            prefix-icon="User"
            v-model="_data.loginForm.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            prefix-icon="Lock"
            v-model="_data.loginForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <!-- 记住密码 -->
        <el-checkbox v-model="_data.isRemenber">记住密码</el-checkbox>
        <!-- 按钮 -->
        <div class="btns">
          <el-button type="primary" @click="login(ruleFormRef)">登录</el-button>
          <el-button type="info" @click="reset(ruleFormRef)">重置</el-button>
        </div>
      </el-form>
    </div>
    <!-- 滑动验证功能 -->
    <Vcode :show="_data.isVcodeShow" @success="successFn" @close="closeFn" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { setToken, removeToken } from "@/util/auth";
import Vcode from "vue3-puzzle-vcode";
import Cookies from "js-cookie";
import CryptoJS from "crypto-js";

const router = useRouter();
const route = useRoute();

const title = ref(import.meta.env.VITE_APP_TITLE);
const ruleFormRef = ref<FormInstance>();

const _data = reactive({
  isRemenber: false, //记住密码
  isVcodeShow: false, // 验证码模态框是否出现
  //表单输入框
  loginForm: {
    username: "",
    password: "",
  },
  //表单验证
  loginrules: {
    username: [
      { required: true, message: "请输入账号", trigger: "blur" },
      {
        min: 3,
        max: 5,
        message: "账号长度在 3 到 5 个字符",
        trigger: "blur",
      },
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      {
        min: 6,
        max: 15,
        message: "密码长度在 6 到 15 个字符",
        trigger: "blur",
      },
    ],
  },
});

onMounted(() => {
  init();
});

const init = () => {
  const userInformation = Cookies.get("userInformation")
    ? Cookies.get("userInformation")
    : "";
  if (userInformation) {
    // 对密码进行解密
    _data.loginForm = EncryptionDecryption(false, userInformation);
    // 将是否记住密码置为true
    _data.isRemenber = true;
  } else {
    _data.loginForm = {
      username: "",
      password: "",
    };
  }
};

//点击登录
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      _data.isVcodeShow = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 通过了验证
const successFn = () => {
  _data.isVcodeShow = false; // 通过验证后，需要手动隐藏模态框
  callHttp();
};

const callHttp = async () => {
  // const { data: res } = await this.$http.post("system/ssologin/Login", {
  //   username: _data.loginForm.username,
  //   password: _data.loginForm.password,
  // });

  // if (res.msg !== "登录成功") {
  //   //   closeLoading();
  //   return this.$message.error("登录失败，账号或密码不正确");
  // }
  // this.$message.success("登录成功");

  // 登录成功后 判断是否选择了勾选密码
  if (_data.isRemenber) {
    //将信息加到cookie
    Cookies.set(
      "userInformation",
      EncryptionDecryption(true, _data.loginForm),
      {
        expires: 30, // 存储30天
      }
    );
  } else {
    // 删除cookie
    Cookies.remove("userInformation");
  }

  //将token加到cookies
  //   Cookies.set("token", res.data.token, {
  //     expires: 30, // 存储30天
  //   });

  // closeLoading();
  //跳转到home页面
  router.push("/home");
};

// 未通过了验证
const closeFn = () => {
  _data.isVcodeShow = false;
};

//重置按钮
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//加密解密方法
const EncryptionDecryption = (isEncrypt: Boolean, data: String | object) => {
  //秘钥
  let aesKey = "e10adc3949ba59abbe56e057f20f883e";

  //将秘钥转换成Utf8字节数组
  let key = CryptoJS.enc.Utf8.parse(aesKey);

  // 加密参数
  const option = {
    iv: CryptoJS.enc.Utf8.parse(aesKey.substr(0, 16)),
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  };

  if (isEncrypt) {
    //加密
    let encrypt = CryptoJS.AES.encrypt(JSON.stringify(data), key, option);
    let encryptData = encrypt.toString();
    return encryptData;
  } else {
    //解密
    let decrypt = CryptoJS.AES.decrypt(data, key, option);
    let decryptData = JSON.parse(decrypt.toString(CryptoJS.enc.Utf8)); //解密后的数据
    return decryptData;
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  // background-image: url(../assets/veer-157272718.jpg);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  background-color: rgb(173, 255, 191);

  .login-box {
    width: 25%;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    .imgbox {
      text-align: center;
      .title {
        padding: 20px 0;
        font-size: 25px;
        font-weight: 900;
      }
    }
    .login-form {
      width: 100%;
      padding: 0px 25px;
      box-sizing: border-box;
    }

    .btns {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
  }
}
</style>

一路向北.　
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue登录页-记住密码功能
10-05
vue登录页-记住密码功能 1.下载jsencrypt 加密解密插件 npm install jsencrypt --dev 2.引用src-utils -jsencrypt.js文件， 3.登录页先引用-代码如下 import Cookies from 'js-cookie'//cook引用 2021-08-09 import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密 1.加载页面使用getCookie存下 created(){ this.getCookie(); }, getCookie() {//rememberMe功能 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) }; }, 2.登录按钮里面写下面代码 if (this.loginForm.rememberMe) {//rememberMe功能 Cookies.set("username", this.loginForm.username, { expires: 30 }); Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); } else { Cookies.remove("username"); Cookies.remove("password"); Cookies.remove('rememberMe'); }
uni-app aes的加密和解密
03-19
uni-app aes的加密和解密
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
10-16
主要介绍了vue项目中使用AES实现密码加密解密的方法，主要是通过ecb和cbc两种模式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 登录滑动验证实现代码
10-18
主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue springboot 密文（密码加密）请求
lichengwei816的博客
12-31 1002
vue springboot 密文（密码加密）请求前端代码调用后端代码调用 前端 代码 var CryptoJS = require("crypto-js"); var UtilsPlugin = {}; UtilsPlugin.install = function (Vue) { Vue.prototype.$utils = new function () { // 加密 this.encrypt = function (password, key) { // retu
vue登录，滑动验证码
姚辉乾
11-20 6425
第一步：npm install --save vue-monoplasty-slide-verify 第二步：main.js配置 import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); 第三步：vue页面或组件： // template &...
Vue实现滑动登录（Java Web项目）
Hello World
04-01 779
Vue实现滑动登录（Java Web项目） 1.Vue中Template部分 代码如下： <div class="login-btn"> <div class="jc-component__range"> <div class="jc-range" :class="rangeStatus ? 'success' :'' "> <i @mousedown="rangeMove" :class="rangeStatus?successIco
一个基于vuejs的触摸滑动插件
08-10
一个基于vue.js的触摸滑动插件
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
LuviaWu的博客
05-05 1万+
vue实现登录滑动拼图验证的两种方法： 第一种是纯前端组件验证，只能区分是人为操作还是机器操作。 第二种是前后端同时验证，这种方法加上后端校验相对会更安全一些。 1、纯前端组件验证 效果如图： 原代码gitee链接 实现步骤，先npm install： npm install --save vue-monoplasty-slide-verify 在main.js引入 import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-
vue 登录滑动验证
baidu_38305286的博客
04-23 1万+
之前别人都是用jq写的，自己整理了一下开始使用&lt;el-form-item label="验证"&gt; &lt;div class="form-inline-input"&gt; &lt;div class="code-box" id="code-box"&gt;
用于登陆验证的vue组件 滑动
jdBug
04-25 2014
1：通过npm安装 npm install vue-drag-verify --save npm install font-awesome <template> <div class="login"> <van-popup v-model="show" :overlay="true" :close-on-click-overlay="true"> ...
vue 页面进出类似APP的滑动效果
老黑
03-07 2098
vue 页面进出滑动效果
中国程序员VS美国程序员，太形象了...
wk843620202的专栏
08-07 386
---END---推荐阅读 那个从深圳流水线工人去Google上班程序媛，最近失业了！阿里正式取消周报：打击低效加班，拒绝形式主义！什么是a站、b站、c站、d站、e站、f站、g站、h站、...
vue登录滑动验证
weixin_44143279的博客
12-03 1873
1、引入vue-monoplasty-slide-verify组件到项目里 先使用命令行安装：npm install --save vue-monoplasty-slide-verify 2、在main.js目录下添加代码 import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); 3、在页面中使用 <slide-verify :l="42"
Vue插件之滑动验证，基于canvas，无其他依赖，兼容IE
热门推荐
monoplasty的博客
12-15 3万+
目录预览安装使用方法参数说明props传参（均为可选）自定义回调函数注意事项 预览 目前仅前端实现 github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify 安装 npm install --save vue-monoplasty-slide-verify 使用方法 // main.js import Vue f......
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 354
vite.config.ts配置。
vue中computed计算属性
luna_H的博客
05-19 406
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
四天学会JS高阶（学好vue的关键）——深入面向对象（理论+实战）（第三天）
爱游戏爱学习的博客
05-20 869
深入对象 原型对象
VUE3+TS实现aes加密解密
06-12
可以使用crypto-js库来实现AES加密和解密，下面是一个使用Vue3和TypeScript的示例代码： ```typescript import { defineComponent } from 'vue'; import CryptoJS from 'crypto-js'; export default defineComponent({ data() { return { message: 'Hello world!', secretKey: 'MySecretKey', encryptedMessage: '', decryptedMessage: '' }; }, methods: { encrypt(): void { const ciphertext = CryptoJS.AES.encrypt(this.message, this.secretKey).toString(); this.encryptedMessage = ciphertext; }, decrypt(): void { const bytes = CryptoJS.AES.decrypt(this.encryptedMessage, this.secretKey); const plaintext = bytes.toString(CryptoJS.enc.Utf8); this.decryptedMessage = plaintext; } } }); ``` 在上面的代码中，我们使用`CryptoJS.AES.encrypt()`方法进行加密，使用`CryptoJS.AES.decrypt()`方法进行解密。需要注意的是，在使用`AES.decrypt()`方法时，我们需要将加密后的字符串转换为`WordArray`类型的字节流，然后再使用`toString()`方法将其转换为UTF-8编码的字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一路向北.　

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值