VUE 爬坑之旅 -- 全局路由拦截，判断及保存登录状态

在实际的商业项目中，基本都会有登录功能，然后有些页面是登录之后才能查看的，没有登录的话会先跳转到登录页，登录成功再返回并刷新数据，几乎所有的应用都是采用的这一套逻辑，那么这一套逻辑在我们的 vue 项目中要怎么实现呢？

vue 项目中，页面之间的跳转是通过路由实现，要想实现上述的逻辑就必须得在路由上面下文章，在官方路由 vue-router 中，有导航守卫这么个东西，还不知道的先看下 官方文档

导航守卫分为全局守卫，路由独享守卫和组件内守卫，分别可以实现全局拦截，单路由拦截和单组件拦截。我们这里获取登录信息并保存登录状态的功能就是使用全局拦截加组件拦截实现的。
大致过程如下：
1. 在全局前置守卫中调用接口获取用户信息并保存到 Vuex 中，
2. 在需要登录校验组件的前置守卫中去获取 Vuex 中的用户信息，有的话正常加载，没有的话跳转到登录

有人可能会说了，你在全局守卫里面去调用接口获取用户数据，那这样不是会造成重复请求的问题吗，为什么不直接把用户数据保存下来。这里有几点原因：
1. 用户信息属于敏感信息，不宜使用本地存储，
2. 不用本地存储，当手动刷新页面时，Vuex 中的数据会被重置，这样也就获取不到正确的登录状态
3. 在项目中，还有一些其他的状态信息需要经常跟服务器同步
鉴于上面的几点，在跟后台沟通后，最终采用了现在的方式，所以在 router 的 index.js 中加入如下代码

router.beforeEach((to, from, next) => {
    //因为 axios 请求是异步的，所以 next 函数必须在请求成功和失败之后都调用，
    //如果只写在请求外面会导致获取到用户信息但是路由还是提前跳转的 bug
    getUncontext('/launch').then(data => {
        store.commit('updateUserInfo',data.user);
        store.commit('updateUnreadCount',data.unreadcount);
        store.commit('updateDownloadStatus',data.download);
        store.commit('updateIosStatus',data.ios);
        store.commit('updateSampleVersion',data.sample);
        store.commit('setCopyright',data.copyright);
        store.commit('setWxkefu',data.wxkefu);
        store.commit('setWxOfficial',data.wxofficial);
        store.commit('setWxAccount',data.wxaccount);
        store.commit('setWxKefuAccount',data.wxkefuaccount);
        next();
    }).catch(error => {
        console.log('launch error', error);
        next();
    });
});

如代码注释中所写，这里要注意 next() 方法的调用时机问题，因为上面的 getUncontext() 函数是一个封装后的 axios 请求，而请求是异步的。所以必须在请求失败或成功后都调用 next() 方法，不然就会出现请求还未完成就 next 了，或者一直卡在这里不 next 的情况。
同时可以看到，在请求成功的回调里面我获取了很多公共的状态和数据，这是根据我们的项目来决定的。

获取并保存了用户信息之后，在需要做登录校验的路由或组件的导航守卫里面去判断是否有用户数据

export default {
        name: "mine",
        beforeRouteEnter (to, from, next) {
            // 导航守卫，进入该组件的对应路由时调用
            next(vm => {
                // 通过 `vm` 访问组件实例
                let userInfo = vm.$store.state.userInfo;
                if (userInfo == null) {
                    vm.$router.replace('/login');
                } 
            });
        },
    }

这样，怎么用路由拦截并保存和判断登录状态的需求就完成了。