vue项目登录页面实现记住用户名和密码

这篇具有很好参考价值的文章主要介绍了vue项目登录页面实现记住用户名和密码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue项目登录页面实现记住用户名和密码

记录一下实现的逻辑,应该分两步来理解这个逻辑

  • 首次登录,页面没有用户的登录信息,实现逻辑如下:

    1. 用户输入用户名和密码登录,用户信息为名为form的响应式对象,v-model分别对应两个输入框
    2. 用户点击登录实现登录功能
    3. 判断是否勾选了记住密码,v-model一个CheckBox,勾选为true,不勾选为false,默认false
      • 若勾选记住密码,则在浏览器的localstorage中写入一个名为loginInfo的对象,值为字符串后的form
      • 若没有勾选,同样在localstorage中写入一个名为loginInfo的对象,值为空

    vue项目登录页面实现记住用户名和密码,web开发,vue.js,前端,javascript

  • 下次再登录,就会根据上一次的勾选状态来判断是否填充form输入框,逻辑如下

    挂载页面时,判断localstorage中是否有需要的对象

    • 如果有,就把rememberMe的值设为true,并向页面的输入框填充用户名和米面
    • 如果没有,就把rememberMe的值设为false

    因为逻辑比较简单,就不再画图了

放一下相关的代码文章来源地址https://www.toymoban.com/news/detail-612103.html

<template>
    <div class="login">
        <el-form ref="formRef" :model="form" :rules="rules" class="login-form">
            <h3 class="title">登录</h3>
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="输入账号">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="输入密码" type="password" show-password
                    @keyup.enter.native="doLogin">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <div class="tooltip">
                <el-checkbox v-model="rememberMe" label="记住我" size="large" />
                <div class="register" @click="toRegister">注册账号</div>
                <!-- <a href="#">忘记密码</a> -->
            </div>

            <el-form-item>
                <el-button style="width: 100%" @click="doLogin" class="input">登录</el-button>
            </el-form-item>

            <div class="sep">
                <div style="margin-top: -11px">
                    <label>联系我们</label>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const router = useRouter()
import http from '@/utils/http'
// import axios from 'axios'

const rememberMe = ref(false)
const formRef = ref(null)
const form = ref({
    username: '',
    password: ''
})

const rules = {
    username: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 3, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
    ],
}

const doLogin = () => {
    const { username, password } = form.value
    const data = { username, password }
    // console.log(data)
    formRef.value.validate(async valid => {
        if (valid) {
            try {
                await userStore.getUserInfo(data)
                // console.log('sdfdssff', userStore.userInfo)
                if (userStore.userInfo.Authorization) {
                    if(rememberMe.value){
                        localStorage.setItem('loginInfo', JSON.stringify(form.value))
                    } else {
                        localStorage.setItem('loginInfo', JSON.stringify({}))
                    }
                    router.push('/')
                }
            } catch (error) {
                ElMessage.error('用户名或密码错误')
            }
        }
        else { ElMessage.error('校验没通过') }
    })
}

const toRegister = () => {
    router.push('/register')
}

// 页面加载时监听是否有记住密码
onMounted(() => {
    // console.log(Object.keys(localStorage.getItem('loginInfoTs')))
    if(localStorage.getItem('loginInfo') != null && Object.keys(localStorage.getItem('loginInfo')).length > 2){
        rememberMe.value = true
        const loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
        form.value.username = loginInfo.username
        form.value.password = loginInfo.password
    } else {
        rememberMe.value = false
    }
})
</script>

核心代码是doLogin方法和onMounted中的内容



到了这里,关于vue项目登录页面实现记住用户名和密码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 写一篇前端Vue怎么获取登录的用户名的博客

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 在前端开发中,获取登录用户的用户名是一项常见的需求。Vue 是一种流行的前端框架,提供了多种方法来获取登

    2024年02月11日
    浏览(48)
  • Git 用户名邮箱的全局配置和单仓库配置(不同项目使用不同账号登录)

    因工作和个人的仓库地址、用户名和邮箱都不一样,很多时候一个git账号无法满足工作和个人学习并行的需求。 全局用户名和邮箱是本地 git 客户端的变量,可配置,不随 git 库而改变。gitee 和 github 是按邮箱来统计贡献者(Contributors)的。 我们的目的是在特定项目里设置特定

    2024年02月14日
    浏览(43)
  • 编写一个JSP登录页面,可输入用户名和密码,提交请求到另一个JSP页面,该JSP页面获取请求的相关数据并显示出来。请求的相关数据包括用户输入的请求数据和请求本身的一些信息。

    实战要求 : 编写一个JSP登录页面,可输入用户名和密码,提交请求到另一个JSP页面,该JSP页面获取请求的相关数据并显示出来。请求的相关数据包括用户输入的请求数据和请求本身的一些信息。 (例如请求使用的协议getProtocol()、请求的URI request.getServletPath()、请求方法requ

    2024年02月06日
    浏览(45)
  • vagrant 用户名密码登录

    正常登录后          sudo -i 切换到root权限        vim /etc/ssh/vim sshd_config        将PasswordAuthentication no设置         为yes 重启sshd.service服务         systemctl restart sshd.service

    2024年01月16日
    浏览(43)
  • 如何安全的修改win11用户名(微软账号登录,用户名会变成纯数字,好丑)

    过河拆桥法 , (下面有图示) 1 设置win11使用本地账户, 2 新建另一个管理员账户GGG, 3 登录GGG, 4 删除目标用户名AAA, 5 重新新建AAA,并设置为管理员, 6 登录AAA, 7 删除GGG, 8 ok                        ok   1、按 Win 键,或点击任务栏上的开始图标,然后在已固定的应

    2024年02月11日
    浏览(140)
  • ClickHouse 为用户名密码登录命令

     ClickHouse 为用户名密码登录命令如下: ./clickhouse-client --host 127.0.0.1 --port 9001 -user default --password 123

    2024年02月11日
    浏览(38)
  • 6、ES单机设置用户名密码、集群设置用户名密码、es-head登录、如何去掉密码

    在配置文件中添加如下参数cat config/elasticsearch.yml: 关闭es服务如果服务启动(kill进程id) 启动es服务 待服务启动完成,且能正常访问后,执行 集群此时是启动状态 elasticsearch-head查看 通过浏览器查看 http://192.168.180.45:9200/_cat/nodes?v 进入主节点的bin目录下执行 再次在bin目录输

    2024年04月26日
    浏览(58)
  • jenkins忘记用户名以及登录密码的解决方法

    1. 进入到安装jenkins路径,找到jenkins安装的配置文件 config.xml  比如我的jenkins安装路径如下图: 2. 打开config.xml文件夹,搜索到useSecurity 将useSecurity的属性改为false 如下图所示:  然后重启jenkins server,然后就可以进入到jenkins主主主页面了。 3. 进入系统管理的管理用户就可以

    2024年02月04日
    浏览(45)
  • 微信小程序个人订单,微信头像用户名信息获取页面

    这里先做一个简单的展示,这个页面是我参加比赛做的小程序,分享给大家,不是很好看哈哈哈哈 话不多说,先上代码。首先是前端页面 .wxml   接下来是美化一下页面.wxss 最后就是js页面啦,这里涉及到微信头像昵称的获取,还有一些button的实现,我这里其他页面没有附着,

    2024年02月11日
    浏览(51)
  • Oracle19c默认用户名system密码不正确不能登录问题解决

    oracle乱码问题一般是 由于oracle字符集设置和操作系统字符集设置不一致 造成的。 查看oracle字符集方式如下: 1.进入sqlplus 命令: 2.以系统管理员身份连接数据库 命令: 3.输入查询语句命令: 查询结果: (1)普通用户: SCOTT (密码:tiger) (2)普通管理员:SYSTEM(密码:

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包