vue 记住密码功能

已于 2024-04-09 16:01:16 修改
阅读量394 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2024-04-09 15:57:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoruijun_2012_4/article/details/137555741
版权 
   <template>
    <div class="bg">
        <div style="position: relative;margin-left:300px;margin-top:250px;">
            <div class="logo"></div>
            <div class="name">
                XXXX平台
            </div>
            <div class="beian">
                XXXXX科技有限公司 丨 京ICP备XXXX号-X
                <p>增值电信业务经营许可证 京XXXX</p>
            </div>
        </div>
        <!--登录-->
        <div class="form" style="position: absolute;right:300px;top:100px;" v-if="navIndex == 0">
            <div class="title2">欢迎登录</div>
            <div class="tips2">账号密码登录</div>
            <div class="tips3"></div>
            <div class="formField">
                <v-form ref="signInForm" style="margin-top: 100px;">
                    <v-text-field :label="$t('username')" :rules="formRules.account" clearable
                                  v-model="formData.account"
                                  variant="underlined"></v-text-field>
                    <v-text-field :append-inner-icon="passwordInputType === 'password' ? 'visibility' : 'visibility_off'" :label="$t('password')" :rules="formRules.password"
                                  :type="passwordInputType" @click:append-inner="passwordInputType = passwordInputType === 'password' ? 'text' : 'password'" @keyup.enter="submit" clearable
                                  v-model="formData.password"
                                  variant="underlined"></v-text-field>
                </v-form>
                <div class="text-red" v-if="errorMsg">{{ errorMsg }}</div>
                <div class="mt-5 d-flex justify-space-between">
                    <div class="container">
                        <input @click="remberPassWord" color="primary" type="checkbox" v-model="rememberMe" variant="text">记住密码
                        <v-btn @click="navIndex= 1" color="primary" variant="text">手机号注册</v-btn>
                    </div>
                    <div @click="submit" class="btn" loading="submitting" style="color: #ffffff !important;">登录</div>
                </div>
            </div>
        </div>
        <!--注册-->
        <div class="form" style="position: absolute;right:300px;top:100px;" v-if="navIndex == 1">
            <div class="title2">账号注册</div>
            <div style="margin-top:20px;">
                <v-form ref="signUpForm">
                    <v-text-field :error-messages="fieldErrors.phone" :label="$t('手机号码')"
                                  :rules="formRules2.phone"
                                  @update:modelValue="handleFieldUpdate('phone')" clearable
                                  v-model="formData2.phone"
                                  variant="underlined"></v-text-field>
                    <v-text-field :error-messages="fieldErrors.password" :label="$t('password')"
                                  :rules="formRules2.password"
                                  @update:modelValue="handleFieldUpdate('password')" clearable
                                  v-model="formData2.password"
                                  variant="underlined"></v-text-field>
                    <v-text-field :error-messages="fieldErrors.password2" :label="$t('confirmPassword')"
                                  :rules="formRules2.password2"
                                  @update:modelValue="handleFieldUpdate('password2')" clearable
                                  v-model="formData2.password2"
                                  variant="underlined"></v-text-field>
                    <v-text-field :error-messages="fieldErrors.activationCode" :label="$t('激活码')"
                                  :rules="formRules2.activationCode"
                                  @update:modelValue="handleFieldUpdate('activationCode')" clearable
                                  v-model="formData2.activationCode"
                                  variant="underlined"></v-text-field>
                </v-form>
                <div class="text-red" v-if="errorMsg">{{ errorMsg }}</div>
                <div class="mt-5 d-flex justify-space-between">
                    <v-btn @click="navIndex = 0" color="primary" variant="text">返回登录</v-btn>
                    <div @click="submit2" class="btn" loading="submitting2" style="color: #ffffff !important;">提交注册
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    const {$i18n} = useNuxtApp();
    definePageMeta({
        layout: 'vuetify-app'
    });
    const formData = ref({
        account: '',
        password: ''
    });
    //记住密码属性
    const rememberMe = ref(false);
    const formData2 = ref({
        username: '',
        phone: '',
        activationCode: '',
        password: '',
        password2: '',
        code: '',
    });
    const fieldErrors = ref({
        username: '',
        phone: '',
        password: '',
        password2: '',
        code: '',
    });
    const formRules2 = ref({
        username: [
            v => !!v || $i18n.t('请输入你的昵称'),
            v => v.length >= 4 || $i18n.t('Username must be at least 4 characters')
        ],
        activationCode: [
            v => !!v || $i18n.t('请输入激活码'),
            v => v.length >= 19 || $i18n.t('Username must be at least 4 characters')
        ],
        phone: [
            v => !!v || $i18n.t('请输入你的手机'),
            v => /^1[3456789]\d{9}$/.test(v) || '手机号码格式不正确'
        ],
        password: [
            v => !!v || $i18n.t('请输入你的密码'),
            v => v.length >= 6 || $i18n.t('密码至少是6位数')
        ],
        password2: [
            v => !!v || $i18n.t('请输入你的密码'),
            v => v.length >= 6 || $i18n.t('密码至少是6位数'),
            v => v === formData2.value.password || $i18n.t('两次密码输入要一直')
        ],
        code: [
            v => !!v || $i18n.t('Please enter your code'),
        ],
    });
    const submitting2 = ref(false);
    const signUpForm = ref(null);
    //页面初始化加载，记住的用户名和密码，用户点击记住密码checkbox，系统将用户名和密码记录到localStorage
    onBeforeMount(() => {
        const savedLogin = localStorage.getItem('login');
        if (savedLogin) {
            formData.value = JSON.parse(savedLogin);
        }
        const savedRememberMe = localStorage.getItem('rememberMe');
        if (savedRememberMe) {
            rememberMe.value = savedRememberMe === 'true';
        }
    });
    const submit2 = async () => {
        errorMsg.value = null;
        const {valid} = await signUpForm.value.validate();
        if (valid) {
            if (submitting2.value == true) {
                // 如果已经点击过了，不再执行后续操作并返回
                console.log("请勿重复点击");
            } else {
                submitting2.value = true;
                const {data} = await useMyFetch('/api/register', {
                    method: 'POST',
                    body: JSON.stringify(formData2.value)
                });
                if (data.value.status === 200) {
                    errorMsg.value = data.value.msg;
                    setTimeout(() => {
                        setUser();
                        navigateTo('/account/signin')
                    }, 500)
                } else {
                    errorMsg.value = data.value.msg;
                    submitting2.value = false;
                }
            }
        }
    };
    const handleFieldUpdate = (field) => {
        fieldErrors.value[field] = ''
    };
    const navIndex = ref(0);
    const formRules = ref({
        account: [
            v => !!v || $i18n.t('Username is required')
        ],
        password: [
            v => !!v || $i18n.t('Password is required')
        ]
    });
    const errorMsg = ref(null);
    const signInForm = ref(null);
    const submitting = ref(false);
    const route = useRoute();
    const passwordInputType = ref('password');
    const remberPassWord = async () => {
        //记住登录用户名和密码
        if (!rememberMe.value) {
            localStorage.setItem('login', JSON.stringify(formData.value));
            localStorage.setItem('rememberMe', true);
        } else {
            localStorage.removeItem('login');
            localStorage.removeItem('rememberMe');
        }
    }
    const submit = async () => {
        errorMsg.value = null;
        const {valid} = await signInForm.value.validate();
        if (valid) {
            submitting.value = true;
            const {data, error} = await useMyFetch('/api/login', {
                method: 'POST',
                body: JSON.stringify(formData.value)
            });
            submitting.value = false;
            console.log("登陆返回数据：", data.value);
            if (data.value.status === 200) {
                localStorage.setItem('token', data.value.data.token);
                localStorage.setItem('expires_time', data.value.data.expires_time);
                setUser(data.value.token);
                const callback = route.query.callback ? decodeURIComponent(route.query.callback) : '/';
                location.href = "/"
            } else {
                errorMsg.value = data.value.msg
            }
        }
    };
    let qrcodeData = ref();
    let qrcodeDialog = ref(false);
    let interval = ref('');
    let uuid = ref('');
</script>
<style scoped>
    * {
        color: #000 !important;
    }
    input, .formField >>> .v-application, .v-text-field input, .v-field__input {
        color: #000 !important;
    }
    button[type="submit"] {
        width: 100%;
        padding: 10px;
        border: none;
        background-color: #5cb85c;
        color: white;
        cursor: pointer;
        border-radius: 4px;
    }
    .bg {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg.jpg);
        background-position: left;
        background-size: cover;
        -webkit-filter: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00FFFFFF", endColorstr="#FFFFFFFF", GradientType=1);
    }
    .form .btn {
        /* 矩形备份 2 */
        position: absolute;
        left: 40px;
        top: 510px;
        width: 320px;
        height: 44px;
        border-radius: 6px;
        opacity: 1;
        text-align: center;
        line-height: 44px;
        color: #fff;
        background: #2469F1;
    }
    .form {
        /* 矩形 */
        position: relative;
        padding: 20px;
        width: 400px;
        height: 575px;
        border-radius: 10px;
        opacity: 1;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
    }
    .title2 {
        /* 欢迎登录 */
        font-size: 24px;
        font-weight: 500;
        line-height: 29px;
        letter-spacing: 0px;
        color: #000000;
    }
    .tips2 {
        /* 账号密码登录 */
        position: absolute;
        left: 20px;
        top: 77px;
        width: 84px;
        height: 17px;
        opacity: 1;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        letter-spacing: 0px;
        color: #000000;
    }
    .tips3 {
        /* 矩形 */
        /* 矩形 */
        position: absolute;
        left: 20px;
        top: 107px;
        width: 84px;
        height: 2px;
        opacity: 1;
        background: #2469F1;
    }
    .logo {
        position: absolute;
        left: 0px;
        top: 40px;
        width: 80px;
        height: 77px;
        opacity: 1;
        background: url(../images/yuzhouxiong.png);
        background-size: 100%;
    }
    .name {
        position: absolute;
        left: 95px;
        top: 55px;
        width: 517px;
        height: 56px;
        opacity: 1;
        font-family: PingFang SC;
        font-size: 56px;
        font-weight: 600;
        line-height: 56px;
        letter-spacing: 4px;
        color: #000000;
    }
    .beian {
        position: absolute;
        left: 0px;
        top: 385px;
        width: 415px;
        height: 48px;
        opacity: 1;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: #666666;
    }
    .container {
        height: 100px;
        border: 0px solid #000;
        font-size: small;
    }
</style>
guoruijun_2012_4
关注
前端vue+elementUI如何实现记住密码功能
10-14
主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue基于Cookies实现记住密码自动登录功能
最新发布
MoYu的博客
07-17 1255
Cookies 和localStorage存储比对实现记住密码功能时，使用 Cookies 和使用 localStorage 各有其优势和考虑因素，具体需要取决于需求和安全考量：综上所述，选择使用 Cookies 还是 localStorage 实现记住密码功能取决于具体需求，特别是安全性、数据大小和与服务器的交互方式等方面的考量。因为每个 Cookie 的大小限制在 4KB 到 8KB 之间。这包括了 Cookie 的名称、值以及其他元数据（如域名、路径、过期时间等）。浏览器对单个域名可以存储的 Cook
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'); }
vue2中实现记住密码功能
DZQ1223的博客
06-17 659
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。
vue实现记住密码功能
weixin_44046781的博客
08-25 541
vue实现记住密码功能 <a-checkbox @change="onChange" :checked="checked"> 记住密码</a-checkbox> //默认checked为false //methods onChange() { this.checked = !this.checked }, //登录成功后 value为用户输入的账号密码 loginSuccess( value) { let val = JSON.str
vue记住密码功能
pleasantsheep_的博客
04-14 3100
记住密码和账号的功能由前端进行操作，而这种操作一般会用到本地存储。当然，本地存储的也不止密码和账号，还有是记住密码框的状态。 首先你需要封装三个方法用来存取数据，（password，username是用户密码绑定的值，checked是记住密码框的绑定值） // 设置cookie setCookie (c_name, c_pwd, c_state, exdays) { const exdate = new Date() exdate.setTime(exdat..
vue记住密码实现
fengshaopu的博客
05-12 341
https://www.jb51.net/article/230746.htm
vue中使用sessionStorage记住密码功能
10-18
在Vue项目中实现记住密码功能，可以通过sessionStorage来实现。sessionStorage是一种Web存储机制，用于在浏览器中保存用户会话级别的信息。其与localStorage的功能相似，但存在一些关键区别，即sessionStorage的数据...
Vue+element+cookie记住密码功能的简单实现方法
10-14
总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...
vue实现记住账号密码
qq_42740298的博客
10-12 4016
vue实现记住账号密码
vue项目实现记住密码到cookie功能示例(附源码)
08-28
本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现记住密码功能
01-15
实现网页记住密码功能。。。。。。。。。。。。。。。。。。。。。。
Vue中登录页面记住密码，并使用crypto-js加密
05-17 4840
主要用到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..
vue3_记住密码功能实现（cookie与sessionStorage，sessionStorage区别以及js-cookie/jsencrypt加密）
qq_45104829的博客
03-21 1460
此处我使用的是Cookie来实现记住密码功能（js-cookie）,使用jsencrypt对密码进行加密解密。可看到储存的cookie。
vue3+js 实现记住密码功能
村长在路上
02-24 1532
除非主动清除localStorage 里的信息 ，不然永远存在，关闭浏览器之后下次启动仍然存在。可以手动设置过期时间，关闭浏览器之后就清除了。每次请求都会被传送到服务器。不与服务器进行交互通信。存放数据大小一般为4K。存放数据大小一般为5M。
VUE脚手架vue-cli4 init方式创建
shaynerain的博客
07-27 341
脚手架工具是什么 简单理解就是搭建平台所需要的工具，更好更快的搭建开发代码工具平台 安装 npm install -g @vue/cli 使用 vue init <template-name> <project-name> 通常 template-name使用的是webpack 生成目录详解 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以
vue项目实现记住密码功能
weixin_42067964的博客
12-28 1628
将账号密码保存到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")
Vue实现记住账号密码功能
weixin_44979432的博客
12-24 1996
Vue实现记住账号密码功能
vue如何实现记住密码功能？
刘杨造梦的博客
02-11 3582
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数。首先你需要封装三个方法用来存取数据，（password，username是用户密码绑定的值，checked是记住密码框的绑定值）当然，本地存储的也不止密码和账号，还有是记住密码框的状态。然后，在你登录的时候判断是否记住密码并将密码和账号存在cookie中。// 判断复选框是否被勾选 勾选则调用配置cookie方法。// 设置cookie。// 读取cookie。
vue前端密码记住功能
04-07
Vue前端密码记住功能可以通过使用浏览器的本地存储来实现。以下是一个简单的实现方式： 1. 在登录页面，添加一个“记住密码”的复选框。...另外，记住密码功能应该只针对个人设备，不应该在公共设备上使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值