Cookie小案例 - 使用Cookie进行判断登录权限Demo

使用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页面为主页

 1 <!--登录模拟-->
 2     <input type="text" id="txt" />
 3     <input type="button" id="btn" value="点击" />
 4     <br /><br />
 5     <!--链接模拟-->
 6     <div id="cc" href="C.html">前往C页面</div>
 7     <br />
 8     <!--清除cookie-->
 9     <div onclick="clearAllCookie();" title="可用于退出登录">清除页面cookies </div>
10     <script>
11         //点击跳转过滤页
12         document.getElementById("btn").onclick = function () {
13             let usname = document.getElementById("txt").value;
14             document.cookie = "name=" + usname;
15             document.cookie = "url=" + document.getElementById("cc").getAttribute("href");
16             //查看cookie中的值
17             alert(document.cookie);
18             //过滤页
19             window.location.href = "B.html";
20         }
21 
22         //单独点击页面跳转,B页面未检测到值则回退本页面
23         //防止用户直接点击,需(登录后)才可浏览
24         document.getElementById("cc").onclick = function () {
25             window.location.href = "B.html";
26         }
27 
28         //清除所有cookie函数
29         function clearAllCookie() {
30             var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
31             if (keys) {
32                 for (var i = keys.length; i--;)
33                     document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
34             } 
35         }
36     </script>

 

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

 1    <script>
 2         //判断cookie是否为空,是则返回上一页
 3         if (getCookie("name") == "" || document.cookie.length == 0) {
 4             //判断是否是直接输入本过滤页,是则返回主页
 5             if (window.location.href == document.referrer) {
 6                 window.location.href = "../";
 7             } else
 8                 window.location.href = document.referrer;
 9         } else {
10             //获取A页面传的url
11             window.location.href = getCookie("url");
12         }
13 
14         //cookie获取值封装
15         展开剩余代码
16     </script>

 

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

   正确访问!
    <script>
        if (window.location.href == document.referrer) {
            window.location.href = "../";
        }
    </script>

 

原文链接:【Cookie小案例 - 使用Cookie进行判断登录权限Demo】    Amaya丶夜雨博客

转载于:https://www.cnblogs.com/AmayaYi/p/11395376.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值