vue 登录 + 记住密码 + 密码加密解密
时间:2019-08-23
本文章向大家介绍vue 登录 + 记住密码 + 密码加密解密,主要包括vue 登录 + 记住密码 + 密码加密解密使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template> <el-form :model="ruleForm"> <h3 class="title">系统登录</h3> <el-form-item prop="mobile"> <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="账号"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input> </el-form-item> <el-checkbox v-model="checked" checked>记住密码</el-checkbox> <el-form-item> <el-button type="primary" @click.native.prevent="handleSubmit">登录</el-button> </el-form-item> </el-form> </template>
<script> import { apis } from '../uitl/config' import CryptoJS from 'crypto-js' //加密js export default { data() { return { ruleForm: { mobile: '', //账号 password: '' //密码 }, checked: true //是否选中记住密码 true为选中 }; }, methods:{ //登录方法 handleSubmit() { var that = this; let loginParams = { mobile: this.ruleForm.mobile, //获取账号 password: this.ruleForm.password //获取密码 }; //登录请求 that.$axios.post(`${api}/auth/login`,loginParams).then((res)=>{ if(res.data.errCode == 0){ console.log('登录成功') if (that.checked == true) { //传入账号,密码,保存天数 that.setCookie(that.ruleForm.mobile, that.ruleForm.password, 7); } else { //清空Cookie that.clearCookie(); } //跳转路由 that.$router.push({ path: '/index' }); }else{ console.log('登录失败') } }) }, //设置cookie方法 setCookie(mobile, password, days) { var text = CryptoJS.AES.encrypt(password, 'secret key 123');//使用CryptoJS方法加密 var saveDays = new Date(); //获取时间 saveDays.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * days); //保存的天数 //字符串拼接存入cookie window.document.cookie = "mobile" + "=" + mobile + ";path=/;saveDays=" + saveDays.toGMTString(); window.document.cookie = "password" + "=" + text + ";path=/;saveDays=" + saveDays.toGMTString(); }, //读取cookie getCookie() { if (document.cookie.length > 0) { var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); //再次切割 //这里会切割出以mobile为第0项的数组、以password为第0项的数组,判断查找相对应的值 if (arr2[0] == 'mobile') { this.ruleForm.mobile = arr2[1]; //拿到账号 } else if (arr2[0] == 'password') { //拿到拿到加密后的密码arr2[1]并解密 var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'secret key 123'); var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码(登录时输入的密码) this.ruleForm.password = plaintext; } } } }, //清除cookie clearCookie() { this.setCookie("", "", 0); //账号密码置空,天数置0 } } } </script>
需要装加密插件
pm install crypto-js
原文地址:https://www.cnblogs.com/ll15888/p/11398424.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 读一篇meta
- meta图表解读
- R海拾遗-森林图绘制
- R海拾遗---热图绘制-pheatmap
- R-随笔-from homework
- The world loves you
- dplyr_new version-across
- dplyr_下篇
- 技术无罪or技术原罪?爬图小心查水表
- scihub? no!
- Elasticsearch:top_hits aggregation
- Elasticsearch:Elasticsearch 中的 refresh 和 flush 操作指南
- Flutter 和 iOS 之间的 Battle:手势交互谁才是老大?
- python 爬取B站原视频的实例代码
- flink实战-使用自定义聚合函数统计网站TP指标