【Vue】Cookie实现登录记住密码功能

登录页效果图:

主要思路是利用浏览器Cookie来存储用户登录信息。除了存储用户名和密码外,还存储了一个记住密码的标志位,如果勾选了,则为true,反之为false。当用户登录时,不论用户有没有勾选“记住密码”,都会先将信息存入Cookie,区别在于,如果没勾选,则会在用户退出登录时,清除Cookie。当然存储信息的方法还有很多种,Cookie一般适用于存储数据量很小的数据。

登录页代码如下:

<style  scoped>
.m-container {
  background: url("../assets/bg.jpg");
  background-size: cover;
  height: 100%;
  min-height: 1000px;
  text-align: center;
  min-width: 420px;
}
.h200{
  height: 200px
}
.global{
  color: white;width: 500px;margin: auto;height: 300px;border:  1px solid gray;
}
.wel{
    font-size: 18px;font-weight:bold;margin: auto;width: 100px;padding: 20px 10px;
}
.mt10{
    margin-top: 10px
}
</style>
<template>
<div class="m-container">
  <div class="h200"></div>
  <div class="global">
    <div class="wel">欢迎登陆</div>
    <el-form class="mt10">
      <el-form-item>
        <el-input :maxlength="128" placeholder="用户名" style="width: 60%;" v-model="username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input :maxlength="128" placeholder="密码" type="password" style="width: 60%" v-model="password"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br>
      <br>
      &
  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现登录页面记住密码功能的一般步骤如下: 1. 在登录页面的表单中添加一个“记住密码”的复选框。 2. 在用户勾选“记住密码”时,将用户名和密码存储在浏览器的localStorage或cookie中。 3. 在页面加载时,检查localStorage或cookie中是否存在用户名和密码,如果存在,则将它们填充到相应的表单中。 4. 在用户提交表单时,判断是否勾选了“记住密码”,如果勾选了,则将用户名和密码存储在localStorage或cookie中。 具体实现可以参考以下代码: ```html <!-- 登录页面 --> <template> <form @submit.prevent="login"> <label> 用户名: <input v-model="username" type="text"> </label> <br> <label> 密码: <input v-model="password" type="password"> </label> <br> <label> <input v-model="remember" type="checkbox"> 记住密码 </label> <br> <button type="submit">登录</button> </form> </template> <script> export default { data() { return { username: '', password: '', remember: false } }, mounted() { // 页面加载时,检查localStorage中是否有用户名和密码 const username = localStorage.getItem('username') const password = localStorage.getItem('password') if (username && password) { this.username = username this.password = password this.remember = true } }, methods: { login() { // 提交表单时,判断是否勾选了“记住密码” if (this.remember) { localStorage.setItem('username', this.username) localStorage.setItem('password', this.password) } else { localStorage.removeItem('username') localStorage.removeItem('password') } // 发送登录请求... } } } </script> ``` 在上面的代码中,我们使用了localStorage来存储用户名和密码。如果你想使用cookie来存储,则可以使用js-cookie库来操作cookie

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值