Cookie小案例

使用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="C.html">前往C页面</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 = "B.html";
        }

        //单独点击页面跳转，B页面未检测到值则回退本页面
        //防止用户直接点击，需（登录后）才可浏览
        document.getElementById("cc").onclick = function () {
            window.location.href = "B.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获取值封装
        展开剩余代码
    </script>

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

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

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