路由钩子函数--路由守卫

1、Vue:router的beforeEach与afterEach钩子函数
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了三大类钩子，两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数：

1、Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/

2、Vue.afterEach(function(to,form))/在跳转之后判断/

beforeEach函数有三个参数：
（1）to:router即将进入的路由对象

（2）from:当前导航即将离开的路由

（3）next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

https://www.cnblogs.com/WQLong/p/8135553.html
https://www.cnblogs.com/wuvkcyan/p/9311155.html

2、代码分析

const router = new Router({
    routes: baseRoutes,
    mode: 'history'
});

router.beforeEach((to, from, next) => {
    iView.LoadingBar.start();
    const isLogin = getToken();
    if (!isLogin | isLogin === []) {
        // 如果没有登录 需要跳转到uuap去登录，uuap回调之后验证
 if (to.path !== '/login') {
            return next({
                name: 'login',
                query: {
                    next: to.path
 }
            });
        } else {
            next();
        }
    } else {

        if (to.path === '/login') {
            return next({
                path: '/'
 });
        }
        if (to.path === '/error') {
            iView.LoadingBar.finish();
            return next();
        }
        if (store.state.user.userName === '') {
            store.dispatch('getUserInfo').then(item => {
                next({
                    path: to.path,
                    query: to.query
 });
            }).catch(
                item => {
                    return next('/error');
                }
            )
        } else if (!store.state.apply.formItems) {
            store.dispatch('getFormInfo').then(
                item => {
                    next({
                        path: to.path,
                        query: to.query
 });
                }
            ).catch(
                item => {
                    return next('/error');
                }
            );
        } else {
            next();
        }
    }
    iView.LoadingBar.finish();
});

export default router;

3、全局进度条
全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。

LoadingBar 只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。

主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar 会模拟进度，

当然也可以通过update()方法来传入一个精确的进度，比如在文件上传时会很有用，具体见API。

iView.LoadingBar.start(); //进度条开始
iView.LoadingBar.finish(); //进度条结束
4、路由守卫

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

const router = new Router({
    mode:'history',
    routes:[]
})

router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 
next 方法的调用参数。
    if(sessionStorage.getItem('token')){

    }else{
      router.push('/login');     //当跳转页面不是login而且没有携带token的时候跳转到登录页
    }
  }
  iView.LoadingBar.start();

  next();   //一定要加next();才会路由跳转
});

router.afterEach(route => {
  iView.LoadingBar.finish();
});

https://www.jianshu.com/p/598bd8ddc61f

5、vue store存储commit 和dispatch

this.$store.commit('toShowLoginDialog', true);
this.$store.dispatch('toShowLoginDialog',false)

主要区别是：

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
https://blog.csdn.net/qq_36165747/article/details/81082963