使用Vue实现Cookie记住用户名和密码

最新推荐文章于 2024-06-25 10:47:04 发布

二木成林

最新推荐文章于 2024-06-25 10:47:04 发布

阅读量1.2k

点赞数 1

分类专栏： # Vue 文章标签： Vue Cookie

本文链接：https://blog.csdn.net/cnds123321/article/details/104142873

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

代码如下（该demo可直接运行查看效果）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<title>Vue之使用Cookie</title>
	</head>
	<body>
		<form id="loginForm" name="loginForm">
			<div class="jumbotron" align="center">
				<table cellspacing="0" cellpadding="0">
					<tr align="center">
						<th colspan="3" style="text-align: center;">
							<h2>登录管理</h2>
						</th>
					</tr>
					<tr>
						<td class="text-muted">身份：</td>
						<td colspan="2">
							<select class="form-control" v-model="identity" name="identity">
								<option value="">请选择身份</option>
								<option value="学生">学生</option>
								<option value="教师">教师</option>
								<option value="管理员">管理员</option>
							</select>
						</td>
					</tr>
					<tr>
						<td class="text-muted">用户名：</td>
						<td colspan="2"><input class="form-control" type="text" name="username" v-model="username">
						</td>
					</tr>
					<tr>
						<td class="text-muted">密码：</td>
						<td colspan="2">
							<input class="form-control" type="password" name="password" v-model="password">
						</td>
					</tr>
					<tr>
						<td class="text-muted">验证码：</td>
						<td><input class="form-control" type="text" name="verificationCode" v-model="verificationCode"></td>
						<td><img :src="imageLink"><a href="#" @click="refresh()">看不清</a></td>
					</tr>
					<tr align="center">
						<td><input type="checkbox" value="rememberMe" name="rememberMe" v-model="rememberMe">记住我
						</td>
						<td><input type="button" class="btn btn-primary" name="loginButton" value="登录" @click="login()">
						</td>
						<td><input type="button" class="btn btn-warning" name="resetButton" value="重置" @click="reset()">
						</td>
					</tr>
					<tr align="center">
						<td colspan="3" class="text-muted">没有账户，立即<a href="/html/register.html">注册</a></td>
					</tr>
				</table>
			</div>
		</form>
		<script type="text/javascript">
			new Vue({
				el: "#loginForm",
				data: {
					identity: "", // 身份
					username: "", // 用户名
					password: "", // 密码
					verificationCode: "", // 验证码,未使用,不需要填写
					rememberMe: true, // 记住我,默认是勾选
					imageLink: "" // 图片超链接,无效,不用管
				},
				// 在页面加载时执行
				mounted: function() {
					var _this = this;
					console.log("加载cookie");
					// 页面加载时获取cookie值
					_this.getCookie();
				},
				// 函数方法
				methods: {
					// 登录方法
					login: function() {
						var _this = this;
						// 这里没有向后台发送请求,只是简单做了一个登录判断
						if (_this.identity === "管理员" && _this.username === "admin" && _this.password === "admin") {
							// 判断复选框是否被勾选，勾选则调用cookie方法
							if (_this.rememberMe === true) {
								console.log("保存cookie");
								// 调用setCookie()方法保存cookie
								_this.setCookie(_this.identity, _this.username, _this.password);
								alert("登录成功，Cookie保存成功！");
							} else {
								console.log("清空cookie");
								// 调用clearCookie()方法清空cookie
								_this.clearCookie();
							}
						} else {
							alert("用户名或密码错误！");
						}
					},
					// 设置cookie
					setCookie: function(identity, username, password) {
						var date = new Date();
						date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * 3); // 这里是设置的是3天
						// 拼接cookie
						window.document.cookie = "identity" + "=" + identity + ";path=/;expires=" + date.toGMTString();
						window.document.cookie = "username" + "=" + username + ";path=/;expires=" + date.toGMTString();
						window.document.cookie = "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
					},
					// 读取cookie
					getCookie: function() {
						var _this = this;
						if (document.cookie.length > 0) {
							// 通过分号(;)作为分割符cookie字符串
							var arr = document.cookie.split(";");
							// 循环遍历分隔后字符串数组
							for (var i = 0; i < arr.length; i++) {
								// 再将字符串通过等号(=)进行分割
								var arr2 = arr[i].split('=');
								// 判断查找相对应的值,replace(/\s*/g, "")表示去掉字符串中的空格
								if (arr2[0].replace(/\s*/g, "") === 'identity') {
									_this.identity = arr2[1];
								} else if (arr2[0].replace(/\s*/g, "") === 'username') {
									_this.username = arr2[1];
								} else if (arr2[0].replace(/\s*/g, "") === 'password') {
									_this.password = arr2[1];
								}
							}
						}
					},
					// 清除cookie
					clearCookie: function() {
						this.setCookie("", "", -1); // 将值置为空，天数为负即可
					}
				}
			});
		</script>
	</body>
</html>

效果如下：