Vue如何实现记住账号密码功能
导读:本文共2997字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 实现思路: 用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中。 说到存入本地缓存,大家想到的一定是cookies、localStorage、sessionStorage,不过后者我是不推荐使用的,咱们既然需求是记住密码那肯定是长时间或到下次取消时失效,但se... ...
目录
(为您整理了一些要点),点击可以直达。实现思路:
用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中。
说到存入本地缓存,大家想到的一定是cookies、localStorage、sessionStorage,不过后者我是不推荐使用的,咱们既然需求是记住密码那肯定是长时间或到下次取消时失效,但sessionStorage仅在当前会话下有效,关闭浏览器窗口后就被清除了,所以并不适用于我们当前的需求,cookies呢可以手动设置过期时间,超过有效期则失效。未设置过期时间,关闭浏览器窗口后就被清除了,显然是符合我们开发需求的,localStorage呢除非主动清除localStorage里的信息,否则将永远存在,关闭浏览器窗口后下次启动任然存在,这个也是符合我们开发需求的,根据业务需求我选择的是localStorage,下面是我实现的具体步骤,废话不多说直接开干。
<el-formref="loginForm":model="loginForm":rules="loginRules"class="login-form"auto-complete="on"label-position="left"><divclass="user-login"><divclass="title-container"><spanclass="title">用户登录</span><spanclass="annotation">BACKGROUNDLOGIN</span></div><divclass="core-container"><el-form-itemprop="username"><spanclass="svg-container"><iclass="iconel-icon-user"/></span><el-inputref="username"v-model="loginForm.username"placeholder="请输入用户名称"name="username"type="text"tabindex="1"auto-complete="on"/></el-form-item><el-form-itemprop="password"><spanclass="svg-container"><iclass="iconel-icon-lock"/></span><el-input:key="passwordType"ref="password"v-model="loginForm.password":type="passwordType"placeholder="请输入密码"name="password"tabindex="2"auto-complete="on"@keyup.enter.native="handleLogin"/><spanclass="show-pwd"@click="showPwd"><imgsrc="@/icons/png/pawyc.png"v-if="passwordType==='password'"/><iclass="el-icon-view"v-else></i></span></el-form-item><el-checkboxv-model="checked"label="记住密码"name="type"></el-checkbox></div><el-buttonclass="loginBtn":loading="loading"type="primary"@click.native.prevent="handleLogin(loginForm)">立即登录</el-button></div></el-form>
记住账号密码实现流程
密码加密:为提高安全性,密码存储前需进行加密处理。目前加密方式有很多种,我这里选用了base64。
npm安装base64依赖
//安装npminstall--savejs-base64//引入constBase64=require("js-base64").Base64
constBase64=require('js-base64').Base64exportdefault{data(){return{loginForm:{username:'',password:'',},checked:false,};},mounted(){letusername=localStorage.getItem('username')if(username){this.loginForm.username=localStorage.getItem('username')this.loginForm.password=Base64.decode(localStorage.getItem('password'))//base64解密this.checked=true}},//立即登录handleLogin(loginForm){this.$refs.loginForm.validate(async(isOK)=>{if(isOK){/*------账号密码的存储------*/if(this.checked){letpassword=Base64.encode(this.loginForm.password)//base64加密localStorage.setItem('username',this.loginForm.username)localStorage.setItem('password',password)}else{localStorage.removeItem('username')localStorage.removeItem('password')}try{letencrypt=newJSEncrypt()//新建JSEncrypt对象encrypt.setPublicKey(this.publicKey)//设置公钥letpassword=encrypt.encrypt(this.loginForm.password)//对密码进行加密this.loading=trueawaitthis['user/login']({username:this.loginForm.username,password:password,captcha:this.captchaKey+':'+this.loginForm.captcha,isRememberMe:this.loginForm.isRememberMe,isScanLogin:this.loginForm.isScanLogin?1:0}).then((res)=>{this.$router.push({path:'/transitionPage',query:{username:this.loginForm.username}})})}catch(error){this.$message.error('用户名或密码错误!')}finally{//不论执行try还是catch都会执行finally去关闭转圈this.loading=false}}})}},};
进行到这里也就算是完成这个需求了
这个需求的核心代码我标一下
/*------账号密码的存储------*/if(this.checked){letpassword=Base64.encode(this.loginForm.password)//base64加密localStorage.setItem('username',this.loginForm.username)localStorage.setItem('password',password)}else{localStorage.removeItem('username')localStorage.removeItem('password')}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Vue如何实现记住账号密码功能的详细内容,希望对您有所帮助,信息来源于网络。