vue 登录页记住密码

最新推荐文章于 2024-08-06 08:00:00 发布
最新推荐文章于 2024-08-06 08:00:00 发布
阅读量398 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43299315/article/details/108684848
版权
HTML
<el-form-item>
    <div style="text-align: right">
    	<el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
    </div>
</el-form-item>
<el-form-item>
	<el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
JS
data(){
	retun{
		rememberPwd:false,
	}
},
//页面每次显示获取cookie
mounted() {
	this.getCookie();
},
//登录
onSubmit() {
     // 为表单绑定验证功能
     let that = this;
     //验证账号密码，编辑登录逻辑 成功则执行是否选择记住密码
     if(that.rememberPwd){
           that.setCookie(that.form.telphone, this.form.pwd, 7); // 保存期限为7天
     }            
},
//存储cookie
setCookie(c_name, c_pwd, exdays) {
     var exdate = new Date(); //获取时间
     exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
     //字符串拼接cookie
     window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
     window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.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('='); //再次切割
	        //判断查找相对应的值
            if (arr2[0] == 'userName') {
            	this.form.telphone = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
            	this.form.pwd = arr2[1];
            }
        }
     }
},
//清除cookie
clearCookie(){
	this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
},
登录页完整代码
<template>
    <div class="bgColor" :style="'height:'+fullHeight+'px;'">
        <div class="login-left">
            <div class="l-l-t">
                <img class="login-logo-img" src="../assets/login-logo.png" alt="">
                <img src="../assets/login-title.png" alt="">
                <div class="border-1"></div>
                <div class="login-type">普查员登录</div>
            </div>
            <div class="l-l-b">
                <div class="login-name">南康统计</div>
                <div class="login-name-english">NANKANG STATISTICS</div>
            </div>
        </div>
        <div class="login-right">
            <div class="login-type-wrap">
                <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" class="login-box">
                    <h3 class="login-title"><span>登录中心</span></h3>
                    <el-form-item prop="telphone">
                        <el-input type="text" @keyup.enter.native="onSubmit" placeholder="请输入账号" v-model="form.telphone"/>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input type="password" @keyup.enter.native="onSubmit" placeholder="请输入密码" v-model="form.pwd"/>
                    </el-form-item>
                    <el-form-item>
                        <div style="text-align: right">
                            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
    import {login} from '@/api/index'

    export default {
        name: "Login",
        data() {
            return {
                fullHeight: document.documentElement.clientHeight,
                form: {
                    telphone: '',
                    pwd: ''
                },
                rememberPwd: false,
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    telphone: [
                        {required: true, message: '账号不可为空', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ]
                },
            }
        },
        watch: {
            fullHeight(val) {//监控浏览器高度变化
                if (!this.timer) {
                    this.fullHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }

            },

        },
        mounted() {
            this.get_bodyHeight()
            this.getCookie();

        },
        methods: {
            get_bodyHeight() {//动态获取浏览器高度
                const that = this
                window.onresize = () => {
                    return (() => {
                        window.fullHeight = document.documentElement.clientHeight
                        that.fullHeight = window.fullHeight
                    })()
                }
            },
            onSubmit() {
                // 为表单绑定验证功能
                let that = this;
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                        //直接赋值会有弱绑定 到时候表单里面的值会跟着一起加密
                        let formData = Object.assign({}, this.form);
                        formData.pwd = this.$md5(formData.pwd).toUpperCase();
                        login(formData).then(res => {
                            if(res.RetCode == 100){

                                if(that.rememberPwd){
                                    that.setCookie(that.form.telphone , this.form.pwd, 7); // 保存期限为7天
                                }
                                this.$message.success("登录成功");
                                localStorage.setItem("account",JSON.stringify(res.data));
                                this.$router.push('/m/collect')
                            }else{
                                this.$message.warning(res.Msg)
                            }
                        })
                        // this.$router.push("/about");
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            },
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.form.telphone = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.form.pwd = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            },
            handleClose() {

            },
        }
    }
</script>

<style scoped lang="scss">

    .bgColor {
        width: 100vw;
        display: flex;
    }

    .login-left {
        /*background: url("../assets/login-bg.png") center center no-repeat;*/
        /*background-size: 100% 100%;*/
        background-image: url("../assets/login-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 70%;
    }

    .l-l-t {
        margin: 76px 60px;
        display: flex;
        align-items: center;
    }

    .l-l-b {
        margin: 20vh 0 0 156px;
        color: #FFFFFF;
    }

    .login-right {
        flex: 1;
    }

    .login-logo-img {
        margin-right: 24px;
    }

    .login-name {
        height: 80px;
        font-size: 80px;
        font-family: SourceHanSansCN-Bold;
        line-height: 80px;
        letter-spacing: 26px;
    }

    .border-1 {
        background-color: #FFF;
        width: 2px;
        height: 30px;
        margin: 0 20px;
    }

    .login-type {
        font-size: 24px;

        font-family: SourceHanSansCN-Light;
        color: #FFFFFF;
    }

    .login-name-english {
        margin-top: 34px;
        height: 30px;
        font-size: 30px;
        font-family: SourceHanSansCN-Bold;
        line-height: 30px;
        letter-spacing: 5px;
    }

    .login-box {
        /*border: 1px solid #DCDFE6;*/
        width: 350px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        /*box-shadow: 0 0 25px #909399;*/
    }

    .login-btn {
        width: 100%;
    }

    .login-title {
        margin: 20px auto;
        padding: 15px 0;
        color: #1D2860;
        position: relative;
        span {
            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                height: 4px;
                left: 0;
                background-color: #1D2860;
                width: 4em;
                border-radius: 5px;
            }
        }
    }

</style>
bablvsj
关注
专栏目录
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'); }
前端vue+elementUI如何实现记住密码功能
10-14
在前端开发中，实现“记住密码”功能是一个常见的需求，特别是在用户登录界面。Vue.js结合Element UI组件库可以轻松地创建交互式用户界面。本文将详细介绍如何使用Vue和Element UI来实现这一功能，主要依赖于浏览器...
vue项目实现记住密码功能
weixin_42067964的博客
12-28 1608
将账号密码保存到cookie中。密码必须加密，采用base64进行加密 // 安装 npm install --save js-base64 // 引入 const Base64 = require('js-base64').Base64 在login.vue中的created钩子函数中，加入 let account = cookie.getCookie("account") let password = Base64.decode(cookie.getCookie("password")
uniapp | vue2 实现用户登录 记住账号密码 功能（附Demo）
最新发布
码农研究僧的博客
08-06 1139
文中分为两个方面，一个是uniapp小程序，一个是vue2前端（vue3其实同理，只不过格式稍有不同而已）
vue2中实现记住密码功能
DZQ1223的博客
06-17 554
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。
vue 登录界面记住密码
yzwdzkn的博客
05-07 554
HTML部分 <div class="ms-login"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm"> <el-form-item prop="username"> ...
vue3+js 实现记住密码功能
村长在路上
02-24 1437
除非主动清除localStorage 里的信息 ，不然永远存在，关闭浏览器之后下次启动仍然存在。可以手动设置过期时间，关闭浏览器之后就清除了。每次请求都会被传送到服务器。不与服务器进行交互通信。存放数据大小一般为4K。存放数据大小一般为5M。
vue网站后台登录注册和忘记密码切换页
07-13
在这个项目中，“vue网站后台登录注册和忘记密码切换页”指的是使用Vue.js实现的网站后台功能，包括用户登录、注册以及找回密码的页面。由于描述中提到“无后台”，我们可以理解为这是一个纯前端的模拟实现，不涉及...
Vue+element+cookie记住密码功能的简单实现方法
10-14
在开发Web应用时，尤其是涉及用户登录功能时，"记住密码"是一个常见的需求。这个功能允许用户在登录时选择是否保留他们的登录凭证，以便在下一次访问时自动填充用户名和密码。本文将详细介绍如何在Vue.js框架下，...
vue项目实现记住密码到cookie功能示例(附源码)
08-28
Vue 项目实现记住密码到 Cookie 功能示例 本篇文章主要介绍了 Vue 项目实现记住密码到 Cookie 功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 Cookie 的基本概念 Cookie 是一个存储在客户端的...
vue登录页面实现记住密码的操作
weixin_44717159的博客
08-30 924
首先看一下思路 思路： ①点击登录按钮→调用接口→如果调用成功，判断是否选择记住密码→如果选择记住密码，则把用户名与密码存到cookie中，否则清除cookie ②点击返回登录页→在登录页created函数中获取用户名与密码赋值给input，checked设置为true 代码如下，后面的数据展示可根据自身要求进行更改 html代码 <div class="loginer"> <div class="login_m"> <div class="
vue项目实现表单登录页保存账号和密码到cookie功能
10-18
主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 记住密码
幻辰科技 nbhctec.com
05-23 233
导入：加密 // 安装 npm install --save js-base64 // 引入 const Base64 = require('js-base64').Base64 创建函数： created() { this.getCookie() }, methods:{ //储存 setCookie(name ,pws ,exdays) { var exdate = new Date(); //获取时间 exdate.set
vue 记住密码功能
guoruijun_2012_4的专栏
04-09 330
【代码】vue 记住密码功能。
vue记住密码功能
pleasantsheep_的博客
04-14 3085
记住密码和账号的功能由前端进行操作，而这种操作一般会用到本地存储。当然，本地存储的也不止密码和账号，还有是记住密码框的状态。 首先你需要封装三个方法用来存取数据，（password，username是用户密码绑定的值，checked是记住密码框的绑定值） // 设置cookie setCookie (c_name, c_pwd, c_state, exdays) { const exdate = new Date() exdate.setTime(exdat..
VUE脚手架vue-cli4 init方式创建
shaynerain的博客
07-27 328
脚手架工具是什么 简单理解就是搭建平台所需要的工具，更好更快的搭建开发代码工具平台 安装 npm install -g @vue/cli 使用 vue init <template-name> <project-name> 通常 template-name使用的是webpack 生成目录详解 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以
Vue中登录页面记住密码，并使用crypto-js加密
05-17 4719
主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：https://blog.csdn.net/qq_40323256/article/details/116838848 一、下载js-cookie cnpm i -S js-cookie 二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..
vue 实现记住密码
weixin_52688746的博客
04-08 708
实现功能： 记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内 不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入 大致思路，通过对cookie的存、取、删来实现记住密码与否；选中记住密码，在点击登录的时候将用户名密码存入cookie，每次进入登录页面的时候先读取cookie，如果浏览器的cookie中有账号密码则自动填入登录框，效果图如下： 直接上代码 HTML 部分： <template> <div class="log
Vue实现记住账号密码功能
weixin_44979432的博客
12-24 1970
Vue实现记住账号密码功能
vue登录页面 记住密码，记住多组账号，账号相同的时候，自动输入其密码，并且取消记住密码，讲此账号删除，并且相同账号只能拿存一次，代码实现
05-29
下面是一个简单的 Vue 登录页面的代码实现，包括记住密码、多组账号、自动输入密码、删除账号等功能： ``` <template> <div> <form> <div> <label for="username">用户名：</label> <input type="text" id="username" v-model="username" /> </div> <div> <label for="password">密码：</label> <input type="password" id="password" v-model="password" /> </div> <div> <input type="checkbox" id="remember" v-model="remember" /> <label for="remember">记住密码</label> </div> <button type="button" @click="login">登录</button> </form> <ul> <li v-for="(item, index) in accounts" :key="index"> <span>{{ item.username }}</span> <button type="button" @click="removeAccount(index)">删除</button> </li> </ul> </div> </template> <script> export default { data() { return { username: '', password: '', remember: false, accounts: [], }; }, mounted() { // 从本地存储中读取已经记住的账号列表 const accounts = JSON.parse(localStorage.getItem('accounts') || '[]'); this.accounts = accounts; }, methods: { login() { // 将当前输入的账号和密码加入到本地存储中 const account = { username: this.username, password: this.password }; const accounts = [...this.accounts, account]; localStorage.setItem('accounts', JSON.stringify(accounts)); // 如果记住密码选项框被选中，则将账号和密码存储到本地存储中 if (this.remember) { localStorage.setItem(this.username, this.password); } else { localStorage.removeItem(this.username); } }, removeAccount(index) { // 从本地存储中删除该账号的密码 const account = this.accounts[index]; localStorage.removeItem(account.username); // 删除已经被记住密码的相同账号 const accounts = this.accounts.filter((item) => item.username !== account.username); localStorage.setItem('accounts', JSON.stringify(accounts)); this.accounts = accounts; }, }, watch: { username(value) { // 如果本地存储中已经存在相同的键，则自动填充密码并取消“记住密码”选项框的选中状态 const password = localStorage.getItem(value); if (password) { this.password = password; this.remember = false; } }, }, }; </script> ``` 需要注意的是，上面的代码只是一个简单的实现，实际项目中可能需要考虑更多的安全性和用户体验问题。例如，密码应该加密存储，账号列表应该进行分页等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值