Vue爬坑之旅(十七)：关于vue路由守卫的一些用法

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。

对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。

导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。

贴上文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({
    mode: 'history',
    base: '/temple',
    scrollBehavior,
    routes
});

router.beforeEach((to, from, next) => {
    //这里写你的判断逻辑
    const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];//需要登陆的页面名
    let isLogin=  localEvent.get('web_login')||false;//获取是否登录状态
    // 未登录状态；当路由到nextRoute指定页时，跳转至login
    if (nextRoute.indexOf(to.name) > -1) {  
      if (!isLogin) {
        //router.push({ name: 'login' });//可以直接跳转名
        //next({ path: '/login', query: { redirect: to.fullPath } });//也可以跳转路径，并带上重定向
      }
    }
    // 已登录状态；当路由到login时，跳转至home 
    if (to.name === 'login') {
      if (isLogin) {
        router.push({ name: 'home' });
      }
    }
    next();
});

• to: Route: 即将要进入的目标

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

局部守卫

局部守卫即在不同的页面单独判断

这里举一个例子，app中嵌入vue页面，如果未登录状态进入某个vue页面需要登录，在app中调用app的登录，其他端则调用自己的登录。可以在页面进入登录页面是进行判断：

{ path: '/login', component: Login, name: 'login', meta: { title: '登录', canEnterOrNot: true },
    	beforeEnter: (to, from, next) => {
	        let UserLoginInfo = storeLocal.get('UserLoginInfo') || {};//现获取登录信息
			  if(UserLoginInfo.token) {//如果已经登录则直接前往首页
			    next({
			      path: '/home',
			      query: {
			        redirect: to.fullPath
			      }
			    });
			  } else {
			  	//如果在app中则自动前往app的登录页
			  	let isApps =  localEvent.get('renrenfo_webview_login')||false;//是否app
			  	if(isApps){
				    // 安卓app中回调
				    let u = navigator.userAgent;
				    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				    if(isAndroid){
				       window.native.login();
				       return false;
				    }else if(isiOS){
				    	webkit.messageHandlers.showLoginHandler.postMessage('');
				    	return false;
				    }
				}else{
					next();
				}
			  }
	    }
    },

组件内守卫

1、beforeRouteEnter  进入组件之前

进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字

不过，你可以通过传一个回调给 next来访问组件实例，也就是说可以通过 next 来回调实例化后的组件，用next函数的 vm 参数充当 this

    export default {
        name: "Admin",
        data(){
          return{
            infor:'hw'
          }
        },
      beforeRouteEnter:(to,from,next)=>{
          //此时该组件还没被实例化
          alert(this.infor);       //弹出消息框信息为 undefined
        next(vm =>{
          //此时该组件被实例化了
          alert(vm.infor);         //弹出消息框信息为 hw
        })
      }
    }

2、beforeRouteLeave       离开组件之后

 离开组件之后调用，可以调用 this 关键字

    export default {
      name: "Admin",
      beforeRouteLeave(to,from,next){
          if(confirm("确定离开吗？") == true){
            next()   //跳转到另一个路由
          }else{
            next(false);//不跳转
          }
      }
    }

3、beforeRouteUpdate (2.2 新增)      该组件被复用时调用

   该组件被复用时调用，可以调用 this 关键字

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  }