vue实现记住账号密码

1.在向后台提交登陆信息成功后，判断用户是否勾选记住密码，如果勾选，将账号，密码以及token（需要封装拦截器）储存在cookie中，如果没勾选，向cookie中存入账号和密码字段为空

2.密码需要加密，目前加密方式有很多种sha1,base64和md5等，我采用的是base64

3.npm安装base64依赖：
// 安装
npm install --save js-base64
// 引入
const Base64 = require(‘js-base64’).Base64

4.在页面加载时从cookie中获取登录信息，判断是否存在，如果存在，需要先将密码解密，将其赋值给登录表单，并将记住密码选择框勾选

代码

<template><form class="main"><!-- 账号 --><div class="item"><label for="account">账号</label><input type="text" style="display:none"><input type="text" v-model="loginForm.account"  id="account"></div><!--密码--><div class="item"><label for="password">密码</label><input type="password" style="display:none"><input type="password" v-model="loginForm.password" id="password"></div><!-- 记住密码 --><div class="item"><label>记住密码</label><input type="checkbox" v-model="loginForm.remember"></div><!--登录按钮--><button @click="submit">登录</button></form>
</template><script>
// 引入base64
const Base64 = require('js-base64').Base64
export default {data () {return {// 登陆表单loginForm:{account:'',password:'',remember:''}}},created () {// 在页面加载时从cookie获取登录信息let account = this.getCookie("account")let password = Base64.decode(this.getCookie("password"))// 如果存在赋值给表单，并且将记住密码勾选if(account){this.loginForm.account = accountthis.loginForm.password = passwordthis.loginForm.remember = true}},methods: {// 登录submit: function () {// 点击登陆向后台提交登陆信息axios.post("url",this.loginForm).then(res => {// 储存token（需要封装拦截器，将token放入请求头中）this.setCookie('token',res.token)// 跳转到首页this.$router.push('/Index')// 储存登录信息this.setUserInfo()})},// 储存表单信息setUserInfo: function () {// 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，// 如果没有勾选，储存的信息为空if(this.loginForm.remember){this.setCookie("account",this.loginForm.account)// base64加密密码let passWord = Base64.encode(this.loginForm.password)this.setCookie("remember",passWord)    }else{this.setCookie("account","")this.setCookie("password","") } },// 获取cookiegetCookie: function (key) {if (document.cookie.length > 0) {var start = document.cookie.indexOf(key + '=')if (start !== -1) {start = start + key.length + 1var end = document.cookie.indexOf(';', start)if (end === -1) end = document.cookie.lengthreturn unescape(document.cookie.substring(start, end))}}return ''},// 保存cookiesetCookie: function (cName, value, expiredays) {var exdate = new Date()exdate.setDate(exdate.getDate() + expiredays)document.cookie = cName + '=' + decodeURIComponent(value) +((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())},}
}
</script><style>
.main {width: 300px;
}
.main .item {display: flex;align-items: center;line-height: 30px;
}
.main .item label {width: 100px;
}
</style>

vue实现记住账号密码相关推荐

Vue实现记住账号密码功能
实现思路: 用户登录时若勾选"记住我"功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中. 说到存入本地缓 ...
Vue实现登录记住账号密码功能的思路与过程
文章来源: 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码: 功能界面记住账号密码功能的具体实现密码加密 localStorage cookies ...
android中注册的账号密码储存在,Android中使用SharedPreferences完成记住账号密码的功能...
效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 SharedPreferences会记录CheckBox的状态,如 ...
利用SharedPreferences完成记住账号密码的功能
利用SharedPreferences完成记住账号密码的功能效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 Sh ...
Jsp使用Cookie完成记住账号密码的功能
网站中对于记住账号密码,方便下次登录的使用非常普遍,那么它是怎么实现的呢? 首先他的流程是,设计一个复选框,当选中复选框时,就会传值到处理页面,复选框的用途就是判断用户是否愿意记住账号密码. 我们通过 ...
C# ASP.NET MVC:使用Cookie记住账号密码
MVC记住账号密码使用cookie操作前端: 1 <div> 2 用户名:<input type="text" id="UserName" ...
uni-app 实现记住账号密码功能
1.示例: 2.代码: 只看核心代码块其他不用管 <template><view class="page"><view class="to ...
QT 记住账号密码登录
弄了个简单的记住账号密码登录功能,适合初学者学习,直接上代码,代码有注释. 喂饭到嘴边了,看你会不会吃啦开发环境是VS2015 1.由于没有写注册功能,所以账号和密码我提前写在一个ini文件,这个文 ...
ssm实现记住账号密码（cookie）
cookie实现记住账号密码 1.需要实现的功能? 2.实现思路 3.后端代码 1.需要实现的功能? 在我们登陆的时候,页面有一个记住密码的单选框,如果用户勾选了记住密码,那么下次登陆的时候,就无需输 ...

vue实现记住账号密码

代码

vue实现记住账号密码相关推荐

最新文章

热门文章