登入頁效果圖：

主要思路是利用瀏覽器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>
      <el-button size="large" type="primary" @click="login" style="width: 60%;">登陸</el-button>
    </el-form>
  </div>

</div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      username: "",
      password: "",
      checked: true
    }
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    login() {
      var vm = this
      var params = new URLSearchParams();
      params.append('username', this.username);
      params.append('password', this.password);
      axios.post("/api/v1/login/loginUser", params)
        .then(function(response) {
          if (response.data.ret == -1) {
            console.log("ret: " + response.data.ret);
            alert("使用者名稱或密碼錯誤！")
          } else {
            var remeberFlag;
            //判斷複選框是否被勾選
            if (vm.checked == true) {
                // console.log("checked == true");
                remeberFlag = "true";
            }else {
                remeberFlag = "false";
            }
            //呼叫配置cookie方法,傳入賬號名，密碼，和儲存天數3個引數
            vm.setCookie(vm.username, vm.password, 7, remeberFlag);
            vm.$router.push({path:'/index'});
            console.log("username: " + response.data.data.user.username);
          }
        })
        .catch(function(error) {
          console.log("Error: " + error);
        });
    },

    //設定cookie
    setCookie(c_name, c_pwd, exdays, remeberFlag) {
        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();
        window.document.cookie = "remeberFlag" + "=" + remeberFlag + ";path=/;expires=" + exdate.toGMTString();
    },

    //讀取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.username = arr2[1]; //儲存到儲存資料的地方
                } else if (arr2[0] == 'userPwd') {
                    this.password = arr2[1];
                }
            }
        }
    }
  }
}
</script>
 

登入成功後，檢視瀏覽器Cookie

在跳轉到主頁後，一般會在導航欄展示登入使用者名稱，以及會有登出按鈕

Header.vue程式碼如下：

<style>
  .el-header {
  }
</style>
<template>
  <div>
      <el-header>
        <el-menu class="el-menu-demo" mode="horizontal"
         @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#fff">
          <div style="float:left; padding:15px; color:#fff; font-size:20px; cursor:pointer"><span @click="link">版本釋出平臺</span></div>
          <el-submenu style="float:right" index="2"  >
            <template slot="title">當前使用者：<span id="usernameSpan"></span></template>
            <el-menu-item index="logOUt">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
    <!-- </el-container> -->
  </div>
</template>
<script>
export default {
    data() {
      return{
        remeberFlag: true,
      }
    },

    mounted() {
      this.getCookie();
    },

    methods: {
      link() {
        this.$router.push('/index');
      },

       // 退出登入
       handleSelect(key, keyPath) {
         console.log(key, keyPath);
         if(key == "logOUt"){
           var vm = this
           this.$http.post("/api/v1/login/logOut")
             .then(function(response) {
               if(vm.remeberFlag == "false"){
                 console.log("清空Cookie")
                 vm.clearCookie();
               }
               vm.$router.push('/');
             }).catch(function(error) {
               console.log("outLogin error");
             });
         }
       },

       //讀取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') {
                       var usernameSpan = document.getElementById('usernameSpan');
                       usernameSpan.innerText = arr2[1];  //儲存到儲存資料的地方
                   } else if (arr2[0] == 'remeberFlag') {
                       this.remeberFlag = arr2[1];
                   }
               }
           }
       },

       //設定cookie
       setCookie(c_name, c_pwd, exdays, remeberFlag) {
           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();
           window.document.cookie = "remeberFlag" + "=" + remeberFlag + ";path=/;expires=" + exdate.toGMTString();
       },

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

     }
}
</script>
 

若使用者登入時未勾選“記住密碼”，則點選退出後，再次檢視瀏覽器Cookie，發現已經清空了