项目中遇到的一些问题

摘要：纪录下前几天遇到的问题前几天一个项目中写了个登录功能算是入行以来写的第一个功能遇到几个问题稍微记录下简单介绍这项目只调用了和还有一些插件我基本都是在写原生的方法用的少运用保持用户登录状态原理就不赘述了百度很多登录发送账号密码给后端后端返回前

纪录下前几天遇到的问题

前几天一个项目中写了个登录功能,算是入行以来写的第一个功能,遇到几个问题稍微记录下

简单介绍这项目,只调用了layui和jquery 还有一些插件,我基本都是在写原生,jq的方法用的少

运用token保持用户登录状态
token原理就不赘述了,百度很多,登录发送账号密码给后端,后端返回token前端存储到cookie或者本地存储中,
在发送请求时,在请求头中带上token就可以,其实功能很简单,但是遇到一点小问题,下面简单说下
因为这项目与之前一个项目调用的同一个后端数据,之前的项目也有登录功能第一个问题就是,
这两项目同时打开时,新项目页面cookie存储的token会多一个
这问题我还是没解决,最后在新项目用 window.sessionSorage 存储token

判断token失效,并且让用户重新登录
token失效的话,接口会返回code:401,
所以这需求也很简单,只要判断接口返回code是否是401,一个if判断就出来了,但是在项目里面有很多接口,而且还不是我一个人书写,所以我就考虑ajax有没有方法可以统一处理ajax的返回数据

然后我就开始扒文档+百度;
找到 $.ajaxSetup 这方法 代码贴下
百度搜也有一篇比较好的文章写的比较详细

文章

    $.ajaxSetup({
        complete: function(XMLHttpRequest, textStatus) {
             try {
                 var jsonData = JSON.parse(XMLHttpRequest.responseText)
                 if (jsonData.code === 401) {
                     window.location.href = "login.html";
                     sessionStorage.removeItem("token");
                   } else {
                   
                   }
               } catch (e) {
                console.log(e);   
               }
        }
    })

补充下这文章没说到的,也可能只有我一个人遇到这问题..
$.ajaxSetup 这方法不是success之前触发的..
是在success里的逻辑触发完才会触发 这个方法
我遇到的问题就是 如果token失效 success里的处理函数就要会报错,因为获取数据完之后我没加if判断
来校验获取的数据是否是正确,当 success 里的处理函数报错时,就会直接抛出错误,不执行后面的方法,
这坑,我找了蛮久的,可能是因为菜

ajax的简单封装
关于ajax的封装网上有很多,就不细说,我就贴下我自己的封装方法,记录下
就一个拼接请求的服务器地址,以后如果要等会服务器,就不用一个一个改
还有一个就是其你去头带上token
设置默认提交是josn 其实有点弊端,得后端配合 接口提交的参数都是json形式,而不是表单提交
我这里跟另外一个前端说话,如果是运用表单提交参数的话,就多带带设置请求头,默认使用json提交参数

 $.ajaxSettings.beforeSend = function(xhr, obj) {
   obj.url = baseURL + obj.url;
   $.ajaxSettings.contentType = "application/json";
   xhr.setRequestHeader("token", sessionStorage.getItem("token"))
  };