版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mr_EvanChen/article/details/80848021
登录页效果图：
主要思路是利用浏览器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，发现已经清空了
