VUE 使用Jquery和Axios实现登录

这篇日志记录下jquery在VUE中的使用方法，还有我登录使用的方法。

我先啰嗦几句。据说localstroage存储信息这个，各大厂都在用，比如说实现类似小米商城那种，未登录便可添加购物车应该是应用的localstroage（这只是我的猜测）。

这样做的好处就是我关闭了当前窗口，一会我再打开，我刚刚添加到购物车的商品还在，体验非常好。

但是同时也有一个问题，我这是后台管理系统，如果我非正常退出，在有效期内，其他人打开我的浏览器，那么他不用登陆便可以进入到我的管理系统中。

这个太危险了，不好。

还是继续研究SESSION，刚开始研究一门新技术的时候，可能会把自己局限在一个角落里边，随着研究的时间长了，眼界自然会慢慢的变宽，很多东西不是没有，而是你不知道。

Vue只是把前端封装成了一个框架，他跟服务器端是不发生关系的。也就是说，跟session是没有关系的。只是，他不能使用php标签或者smarty标签在HTML页面中使用session。这个没有关系，能存就行，其余的都有办法。（脑子最开始短路了）

判断登录也很容易，一进入路由守卫，就先用axios请求一下后端接口，查看是否存在session，如果存在，直接进入首页，不存在，跳登录页。

理想很丰满，现实很残酷。Axios是异步请求，也就是说，axios的返回值还没回来呢，已经走进导航里边了。这不行啊。

当时我的想法是，既然这样，那就同步请求就好了啊。然后百度，axios是异步请求，没有同步这一说。这不完了嘛，不能，我们还有万能的jquery。虽然我觉得在VUE这么高大上的框架中使用jquery觉得不是很好。

Jquery是有同步请求的（async）。然后，就有了接下来的事情。

首先全局安装依赖：

npm install jquery –save

main.js中引入

//引入 jquery插件
import $ from 'jquery';

router.js

router.beforeEach((to, from, next) => {//在路由跳转之前做的事
  var userinfo = '';
  $.ajax({
    url: '你的url',
    type: 'POST', //GET
    async: false, //true或false,是否异步
    data: {},
    timeout: 5000, //超时时间
    dataType: 'json', //返回的数据格式：
    success: function (response) {
        // 如果session不存在，response为空
      userinfo = response;
    },
    error: function (response) {
    }
  })
}

这样做就没有问题了，同步请求，根据userinfo中的值判断是否存在session进而判断，下一步的路由该去向哪里。

但是，这始终是个同步请求，效率相对低，可能会造成运行速度变慢。

还得是异步请求，突然我觉得我好想错过了点什么东西：我把路由那部分代码，封装成一个函数，用axios异步请求，在他的回调里边调用路由函数，这不就可以了么。好像可以。

这部分代码是我现在正在使用的（3.0版本）。

router.beforeEach((to, from, next) => {//在路由跳转之前做的事
  var userinfo = '';
  axios({
    method: "post",
    url: "你的url",
    data: {}
  })
.then(function (response) {
// 如果session不存在，response为空
      userinfo = response;
      console.log(userinfo);
      // 调用路由的方法，异步执行（可用jquery同步执行，但是阻塞UI，效率相对低）
      router ();
    })
    .catch(function (response) {
      alert('请求失败');
    });
  /**
   * 路由封的方法
   * 20180920
   */
  function router () {
      // 判断userinfo是否为空
   // 你的路由代码
}
}

这部分就是我VUE登录的血泪史。经历了几个版本，不过还好。找到了一个相对完美的方法。