cookie存储用户登录状态 并且修改导航内容(欢迎***), 实现部分导航点击后判断未登录则跳入登录页面

xiaoxiao2021-03-01  25

通常情况下,我们的导航右侧显示内容要根据登录状态改变,例如:未登录则显示登录注册,登录后则显示欢迎***,实现方法有很多种,可以前端实现,也可以后端实现,前端实现的方法也很多,session,cookie,或者直接用jquery的插件,比如cookie.js;

作为一个前端小白,尽量自己解决,多写就会多学到东西的呀!下面是我通过百度,总结的方法,很简单,希望能够一起分享!

cookie方法:

注:因为怕大家看不懂,不知道到底复制了代码之后放到自己的哪个文件下,我粘的代码比较详细,你们需要的看,不需要的直接过滤就好。你们复制红色部分就可以啦!

① 我是用ajax调用接口进行登录,登录成功时,创建一个cookie!     $('#j-login-btn').click(function(userName,passWord){         var userName = $('#j-pwd-tel').val();         var passWord = $('#j-pwd').val();         var type = 1;         if(userName == '手机号') {             $("#msgphone").text("手机号不能为空!")             return false;         } else {             if(passWord == '密码') {                 $("#msgpsw").text("密码不能为空!")                 return false;             } else {                 $.ajax({                     type: "post",                     url: 'http://brace.hxwomi.com/web/user/login',                     data: {                         "info": "{\"username\":\"" + userName + "\",\"passwordOrSms\":\"" + passWord + "\",\"type\":\"1\"}"                     },                     success: function(data) {                         console.log(data);                         if(data.code == "200") {                             location.href = 'index.html';                                                         //增加的保存cookie代码                             var exp = new Date();                             exp.setTime(exp.getTime() + 60 * 1000 * 60 * 24); //24小时                             document.cookie = "userName=" + userName + ";expires=" + exp.toGMTString();                             document.cookie = "passWord=" + passWord + ";expires=" + exp.toGMTString();                             //新增结束                         } else {                             $("#msgpsw").html("手机号或密码错误!")                         }                     },                     error: function() {                         alert("网络错误");                     }                 })

            }         }

    })

获取cookie信息(比如我在首页要判断是否登录,然后修改导航样式,那就粘贴以下代码放到首页) <script>            function getCookie(name) {                 var strCookie = document.cookie;                 var arrCookie = strCookie.split("; ");                 for (var i = 0; i < arrCookie.length; i++) {                     var arr = arrCookie[i].split("=");                     if (arr[0] == name)                         return arr[1];                 }                 return "";             }

            var islogin = getCookie("userName");             if(islogin!==''){                 $("#loginbf").hide();                 $("#loginaf").show();             }else{                 $("#loginbf").show();                 $("#loginaf").hide();             }         </script>

这里我的导航写了两种样式,一种id为loginbf,一种为loginaf,通过显示隐藏来实现样式的改变,你们也可以通过增加类名来改变样式。这就是最普通的jquery,就不多说啦。

此时导航的改变已经实现啦!!!!

 

如果想实现点击导航,比如我的课程按钮(id=myclass),需要先登录,登录后才可以进入我的课程页面,实现如下:

//我的课程是否登录验证     $("#myclass").click(function(){         var islogin01=getCookie("userName");         if(islogin01!==''){             location.href='mycourse.html'         }else{             alert("您还没有登录哦!立即登录!");             location.href='login.html';         }     })

此时,如果未登录,就会跳转到登录页面,登录成功后,我写的是跳转到首页,大家按照需要自己写!

 

最后,登出后,要清空cookie!

function exitLogin() {         document.cookie = "userName=";         document.cookie = "passWord=";         window.location.reload(true);     }

当你登出成功后调用该方法即可!代码如下:

//登出    $('#logout').click(function(){         $.ajax({             type: "post",             url: 'http://brace.hxwomi.com/web/user/logout',             success: function(data) {                 console.log(data.code);                 if(data.code == "200") {                     exitLogin();                    location.href = 'index.html';                                     } else {                     alert(data.msg)                 }             },             error: function() {                 alert("网络错误");             }         })     })

 

 

我项目用到的暂时就这么多,希望如果对你有帮助啦。前端小白,一起加油!

转载请注明原文地址: https://www.6miu.com/read-4050336.html

最新回复(0)