使用Cookie进行判断登录权限的小Demo

1.document.cookie 属性来创建 、读取、及删除 cookie

2.document.referrer 属性返回载入当前文档的来源文档的URL，如果是直接访问，则为null

3.重点在于登录后cookie的存储，读取cookie的值进行判断，退出后清除cookie函数

Demo浏览 ，F12打开Application，浏览Storage下的Cookies

创建A,B,C三个页面，A为登录页，B页面为过滤页，进行判断是否登录再执行跳转，用于权限阻止，C页面为最终显示页面

1.A页面为主页

<!--登录模拟--> <input type="text" id="txt" /> <input type="button" id="btn" value="点击" /> <br /><br /> <!--链接模拟--> <div id="cc" href="4.html">前往A页面</div> <br /> <!--清除cookie--> <div onclick="clearAllCookie();" title="可用于退出登录">清除页面cookies </div> <script> //点击跳转过滤页 document.getElementById("btn").onclick = function () { let usname = document.getElementById("txt").value; document.cookie = "name=" + usname; //获取页面导向地址 document.cookie = "url=" + document.getElementById("cc").getAttribute("href"); //查看cookie中的值 alert(document.cookie); //过滤页 window.location.href = "3.html"; } //单独点击页面跳转，B页面未检测到值则回退本页面 //防止用户直接点击，需（登录后）才可浏览 document.getElementById("cc").onclick = function () { window.location.href = "3.html"; } //清除所有cookie函数 function clearAllCookie() { var keys = document.cookie.match(/[^ =;]+(?=\=)/g); if (keys) { for (var i = keys.length; i--;) document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString() } } </script>

2.B页面为过滤页，进行判断是否登录再执行跳转，用于权限阻止，本页全为js

<script> //判断cookie是否为空，是则返回上一页 if (getCookie("name") == "" || document.cookie.length == 0) { //判断是否是直接输入本过滤页，是则返回主页 if (window.location.href == document.referrer) { window.location.href = "../"; } else window.location.href = document.referrer; } else { //获取A页面传的url window.location.href = getCookie("url"); } //cookie获取值封装 function getCookie(sName) { var aCookie = document.cookie.split("; "); for (var i = 0; i < aCookie.length; i++) { var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } return null; } </script>

3.C页面为最终显示页面

正确访问！

到这里就算结束了,希望对你们有所帮助吧.  附: (文章为原创,转载记得加上出处哦。)