登錄頁面

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后台管理系统实现登录功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。