一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
这篇日志记录下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登录的血泪史。经历了几个版本，不过还好。找到了一个相对完美的方法。
如果你有更好的方法，请在下方留言。
欢迎访问个人博客 guanchao.site
