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 = account
            this.loginForm.password = password
            this.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","") 
            } 
        },
        // 获取cookie
        getCookie: function (key) {
            if (document.cookie.length > 0) {
            var start = document.cookie.indexOf(key + '=')
            if (start !== -1) {
                start = start + key.length + 1
                var end = document.cookie.indexOf(';', start)
                if (end === -1) end = document.cookie.length
                return unescape(document.cookie.substring(start, end))
            }
            }
            return ''
        },
        // 保存cookie
        setCookie: 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>

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中记住密码实现方法有多种,下面介绍其中一种常见的方式: 1. 在登录页面添加一个“记住密码”的复选框,并在用户提交表单时获取该复选框的状态。 2. 如果用户勾选了“记住密码”,则在本地存储中保存用户名和密码。可以使用localStorage或者cookie来实现。 3. 在登录页面的mounted钩子函数中判断本地是否已经存储了用户名和密码,如果有,则将它们自动填写到用户名和密码输入框中。 4. 在提交登录表单时,如果用户未勾选“记住密码”,则清除本地存储中的用户名和密码。 下面是一个简单的代码示例: ```vue <template> <div> <label> <input type="checkbox" v-model="rememberPassword"> 记住密码 </label> <form @submit.prevent="login"> <label> 用户名: <input type="text" v-model="username"> </label> <label> 密码: <input type="password" v-model="password"> </label> <button type="submit">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', rememberPassword: false } }, mounted() { if (localStorage.getItem('username') && localStorage.getItem('password')) { this.username = localStorage.getItem('username') this.password = localStorage.getItem('password') this.rememberPassword = true } }, methods: { login() { // 提交登录表单的逻辑 if (this.rememberPassword) { localStorage.setItem('username', this.username) localStorage.setItem('password', this.password) } else { localStorage.removeItem('username') localStorage.removeItem('password') } } } } </script> ``` 注意:在实际项目中,记住密码实现涉及到安全性问题,需要考虑如何保护用户的账号信息。建议使用加密算法对用户名和密码进行加密存储,以增强安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值