vue2.0项目记住密码和用户名实例

最新推荐文章于 2024-07-17 10:44:11 发布
最新推荐文章于 2024-07-17 10:44:11 发布
阅读量7.9k 收藏 5
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hx_1199/article/details/80270783
版权
本文介绍了一个使用Vue2.0实现记住用户名和密码的实例，选择将登录信息存储在localStorage中，通过简单的代码实现该功能。
摘要由CSDN通过智能技术生成

小的今天突来兴致，试了一下将用户名和密码存在cookie和localStorage里如何实现；从代码难易程度来讲，果断选择了将用户名和密码存在localStorage里面。当然菜鸟上这么说的，楼下。

也许我不是一个好的程序员，不说废话了，直接上代码了：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
 <h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陆</h1>
 <el-form-item >
   <el-input placeholder="账号"  v-model="ruleForm.username"></el-input>
 </el-form-item>
 <el-form-item>
   <el-input  type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
 </el-form-item>
 <div style="padding: 1rem 0 2rem 0;" class
最低0.47元/天 解锁文章
hx_1199
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue2.0实战
qq_42636335的博客
03-06 6735
目录 项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..
vue2中实现记住密码功能
DZQ1223的博客
06-17 513
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。
vue2.0用户名密码验证
08-15
vue2.0用户名密码验证
vue基于Cookies实现记住密码自动登录功能
最新发布
MoYu的博客
07-17 1051
Cookies 和localStorage存储比对实现记住密码功能时，使用 Cookies 和使用 localStorage 各有其优势和考虑因素，具体需要取决于需求和安全考量：综上所述，选择使用 Cookies 还是 localStorage 实现记住密码功能取决于具体需求，特别是安全性、数据大小和与服务器的交互方式等方面的考量。因为每个 Cookie 的大小限制在 4KB 到 8KB 之间。这包括了 Cookie 的名称、值以及其他元数据（如域名、路径、过期时间等）。浏览器对单个域名可以存储的 Cook
vue前端实现记住账户
seimeii的博客
02-10 732
1、HTML <el-checkbox v-model="checked" style="color: #ffffff">记住账号</el-checkbox 2、定义 data() { return { // 登录用户名 userName: "", // 登录密码 passWord: "", checked: false, //记住账号 // 登录时的loading状态 loginLoadi
vue 记住密码功能
guoruijun_2012_4的专栏
04-09 314
【代码】vue 记住密码功能。
vue简单实现记住密码功能
wangle_style的博客
05-28 8481
原理是在提交表单的时候把用户名和密码的值存入cookie中然后再次进入页面时读取cookiehtml部分&lt;div class="log_form"&gt;                &lt;div class="log_form_biao"&gt;蚊子蚊子蚊子&lt;/div&gt;                &lt;div  class="log_form_inp"&g
vue记住账号密码实现过程
weixin_44134816的博客
09-30 780
勾选记住账号 login(){ 获取接口登录成功后 const data = { username: this.loginForm.username, password: this.loginForm.password, }; service .postF(“login”, data) .then((res) => { console.log(“res”, res.data); if(res.data.code == 201) { this.show=true; return } //提示登录成功信息
Vue2.0实现1.0的搜索过滤器功能实例代码
08-31
Vue2.0实现1.0的搜索过滤器功能实例代码 本篇文章主要介绍了Vue2.0实现1.0的搜索过滤器功能实例代码，具有一定的参考价值。下面我们将对该代码进行详细的解读和分析。 首先，我们需要了解Vue2.0中的computed ...
Vue2.0+ElementUI后台管理系统项目
m0_46678809的博客
10-11 2924
可以让用户通过一个可视化工具，可以实现对于数据库进行增删改查的操作。而且需要注意，根据不同的角色（老板、员工），看到的、操作内容是不同的。首页用户管理菜单管理平台属性管理sku管理spu管理文件夹结构build----index.js 是webpack配置文件【很少修改这个文件】mock----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口------项目依赖的模块public。
Vue 2.0 学习笔记（三）
weixin_44772326的博客
12-13 3244
Vue 基础入门（2）：watch侦听器、computed计算属性、vue-cli脚手架构建工程化项目。
vue项目登录页面实现记住用户名和密码
黄钢的博客
07-27 2757
下次再登录，就会根据上一次的勾选状态来判断是否填充form输入框，逻辑如下。挂载页面时，判断localstorage中是否有需要的对象。记录一下实现的逻辑，应该分两步来理解这个逻辑。因为逻辑比较简单，就不再画图了。
【vue学习】权限管理系统前端实现5-登录功能记住密码功能实现
m0_51935008的博客
07-09 1082
的作用是将数据包装成一个响应式的引用，使得数据的变化可以被 Vue 自动追踪，并触发相应的重新渲染。箭头函数是 JavaScript 中的一种函数定义方式，它可以简洁地定义一个函数而不需要使用。存储用户密码，为了安全需要加密，获取密码解密。所以我们安装依赖'jsencrypt'记住密码，我们通过cookie来实现，先安装依赖 'js-cookie'：这行代码使用箭头函数的语法将一个匿名函数赋值给。是箭头函数的语法，用于定义一个没有参数的函数。util下新建jsencrypt.js。
vue项目实现记住密码功能
weixin_42067964的博客
12-28 1600
将账号密码保存到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 1968
Vue实现记住账号密码功能
vue3+js 实现记住密码功能
村长在路上
02-24 1405
除非主动清除localStorage 里的信息 ，不然永远存在，关闭浏览器之后下次启动仍然存在。可以手动设置过期时间，关闭浏览器之后就清除了。每次请求都会被传送到服务器。不与服务器进行交互通信。存放数据大小一般为4K。存放数据大小一般为5M。
vue记住账号密码登录
weixin_45086164的博客
10-27 691
vue记住账号密码登录
vuex用户信息的存取
PaPablame的博客
01-28 6359
一般来说我们的用户信息都存在vuex里面，但是页面每次刷新都会把vuex里面的数据清空，这样我们页面上的头像，用户信息就没有了，所以我们还需要把用户信息存一份在本地。 在登录的时候把数据存本地和存vuex 本地存储：setUser(JSON.stringify(res.data)) vuex存储：this.$store.commit("SET_USER", res.data); "SET_USER"是vuex里面修改user的方法，res.data是你要存的数据。 把vuex里面的数据和本地数据整合
Vue 2.0 项目开发实践入门指南
本节总结了 Vue 2.0 开发实践的入门知识，包括 Vue 2.0 项目结构、Webpack 基本知识点、Vue-cli 安装和使用、项目预览和项目配置。这些知识点将帮助读者快速了解 Vue 2.0 的基本概念和使用方法，为后续的学习和实践...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值