Vue后台管理系统实现登录功能

登录页面

vuex

router.js

main.js设置全局

退出功能删除token 清空localStorage

显示用户名

键盘事件

** 记住密码操作( 读存取cookie与调后端数据无关提交按钮中操作 )**

点击事件

// 登录调接口handleSubmit(name) {// 判断单选框是否被选中if (this.single == true) {console.log("checked == true");//传入账号名，密码，和保存天数7天this.setCookie(this.formInline.account, this.formInline.password, 7);} else {console.log("清空Cookie");//清空Cookiethis.clearCookie();}if (!this.formInline.account && !this.formInline.password) {this.$Message.error("请输入用户名和密码");} else if (!this.formInline.account) {this.$Message.error("请输入用户名");} else if (!this.formInline.password) {this.$Message.error("请输入密码");} else {this.$refs[name].validate(valid => {let val = {account: this.formInline.account,password: this.formInline.password};if (valid) {this.$ajax.post("/api/login", val).then(res => {if (res.data.code == 200) {this.initUserInfo();this.$Message.success({content: "登陆成功",duration: 0.3});} else {this.$Message.error("用户名不存在，或密码错误");}});} else {return false;}});}},//获取用户信息initUserInfo() {this.$ajax.get("/api/getUserInfo").then(res => {const userInfo = res.data.data;// // this.form.username = userInfo.account;localStorage.setItem("userInfo", this.formInline.account);this.$store.commit("changeUserInfo", JSON.stringify(userInfo));this.$router.push({ path: "/tabbar" });this.$Message.success({content: "登陆成功",duration: 0.3});});},

设置cookie

//设置cookiesetCookie(c_name, c_pwd, exdays) {var exdate = new Date(); //获取时间exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数//字符串拼接cookiewindow.document.cookie ="userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();window.document.cookie ="userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();},

读取cookie

//读取cookiegetCookie: function() {if (document.cookie.length > 0) {var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下for (var i = 0; i < arr.length; i++) {var arr2 = arr[i].split("="); //再次切割//判断查找相对应的值if (arr2[0] == "userName") {this.formInline.account = arr2[1]; //保存到保存数据的地方 用户名} else if (arr2[0] == "userPwd") {this.formInline.password = arr2[1]; //保存到保存数据的地方 密码}}}},

清除cookie

//清除cookieclearCookie: function() {this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了}

mounted调用

mounted() {this.getCookie();调用}

Vue后台管理系统实现登录功能相关推荐

3.1 Vue实战--电商后台管理系统的登录功能补充了加密功能
1. 原来功能的不足当登录成功之后,打开调试面板,找到"网络",在请求体中会看到密码和用户名,这是不安全的.这是因为:http协议是明文传输,只要别人一抓包就可以获取到传输的报文 ...
一步步带你做vue后台管理框架(三)——登录功能
系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 ...
后台管理系统的登录功能
1.完成登录功能 1.1 表单重置第一步:给表单添加ref<el-form ref="loginForm"></el-form>第二步:给重置按钮添加事件 ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
Web应用——驾培管理系统之登录功能（作者：小圣）
Web应用--驾培管理系统之登录功能(作者:小圣) 本节博文将向大家介绍本次驾培管理系统的登录功能.从创建一个对应数据表的bean开始,到界面填入参数,后台判断,传值,并且实现页面渲染,通过登录这一基 ...
后台管理系统换肤功能问题整理
后台管理系统换肤功能问题整理一.vuex获取数据二.点击确定更换颜色,更新需要换颜色的页面,这里用到了vue页面的实时更新一.vuex获取数据 computed计算属性获取state里面的值 c ...
开发陪玩游戏源码的后台管理系统，登录的实现是第一步！
在开发陪玩游戏源码时,不仅需要开发Android端和iOS端,还需要开发服务端,也就是后台管理系统,由于后天管理系统掌控者用户端的陪玩游戏源码使用效果,所以非常重要,今天我们先来了解一下号后台管理系统 ...

Vue后台管理系统实现登录功能

Vue后台管理系统实现登录功能相关推荐

最新文章

热门文章