项目中遇到的一些问题

纪录下前几天遇到的问题

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

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