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");
        //清空Cookie
        this.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

 

//設置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //獲取時間
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

 

讀取cookie

 

//讀取cookie
    getCookie: 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

 

//清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都為空，天數為負1天就好了
    }

 

mounted中初始化頁面完成后，再對html的dom節點進行一些需要的操作。

 

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