项目中遇到的一些问题

纪录下前几天遇到的问题

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

简单介绍这项目,只调用了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'))
    };