Vue路由全局守卫

一、路由守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。---- 导航守卫文档地址

二、全局前置守卫beforEach

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

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫方法接收三个参数：

• to: 即将要进入的目标 路由对象
• from: 当前导航正要离开的路由
• next: 执行下一步，一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

项目示例

• 列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面LoginPage；
• 当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage；

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
 
Vue.use(Router)
 
const router = new Router({
  routes: [
    {
      path: '/',  // 默认进入路由
      redirect: '/home'   //重定向
    },
    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '/home',
      name: 'home',
      component: HomePage
    },
    {
      path: '/good-list',
      name: 'good-list',
      component: GoodsListPage
    },
    {
      path: '/good-detail',
      name: 'good-detail',
      component: GoodsDetailPage
    },
    {
      path: '/cart',
      name: 'cart',
      component: CartPage
    },
    {
      path: '/profile',
      name: 'profile',
      component: ProfilePage
    },
    {
      path: '**',   // 错误路由
      redirect: '/home'   //重定向
    },
  ]
});
 
// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('navigation-guards');
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 
  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登录
  // 未登录状态；当路由到nextRoute指定页时，跳转至login
  if (nextRoute.indexOf(to.name) >= 0) { 
    if (!isLogin) {
      router.push({ name: 'login' })
    }
  }
  // 已登录状态；当路由到login时，跳转至home
  if (to.name === 'login') {
    if (isLogin) {
      router.push({ name: 'home' });
    }
  }
  next();
});
export default router;

三、全局后置钩子afterEach（少用）

全局后置钩子与全局前置守卫类似，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
	// ...
})

四、路由独享的守卫beforeEnter

使用方法与全局守卫相同，不同的是全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

//登录模块
path: '/login',
component: () => import('@/views/login'),
beforeEnter: (to, from, next) => {
	if (to.meta.needLogin && !$store.state.isLogin) {
		next({
			path: '/login'
		})
	} else {
		next()
	}
}

五、组件内的守卫

可以在路由组件内直接定义以下路由导航守卫：

1. beforeRouteEnter

• 在渲染该组件的对应路由被 confirm 前调用
• 不能获取组件实例 this，因为当守卫执行前，组件实例还没被创建
• 可以通过 next 获取data中的数据

data() {
	return {
		name: "Grayly"
	};
},  
beforeRouteEnter: (to, from, next) => {
	next(vm => {
		alert("hello" + vm.name);
	})
},

2. beforeRouteUpdate

• 这个方法是vue-router2.2版本加上的。因为原来的版本中，如果一个在两个子路由之间跳转，是不触发beforeRouteLeave的。这会导致某些重置操作，没地方触发。在之前，我们都是用watch 的。但是通过这个勾子，我们有了更好的方式

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

3. beforeRouteLeave

• 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
• 可以访问组件实例 this

beforeRouteLeave: (to, from, next) => {
	if (confirm("你确定要离开吗") == true) {
 		next();
	} else {
 	next(false);
	}
},

4. beforeResolve

• 与router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

5. 返回上一级路由

• 第一种：

history.back();

• 第二种：

this.$router.go(-1);

六、总结

路由守卫分类

• 全局守卫：beforeEach
• 后置守卫：afterEach
• 全局解析守卫：beforeResolve
• 路由独享守卫：beforeEnter
• 组内路由守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

路由导航解析流程

1. 路由导航开始
2. 在当前路由调用 beforeRouterLeave
3. 调用 beforeEach
4. 在重用组件中调用 beforeRouteUpdate
5. 调用 beforeEnter
6. 解析异步路由组件
7. 在被激活的路由组件里调用 beforeRouteEnter
8. 调用 beforeResolve
9. 导航被确认
10. 调用全局的 afterEach
11. 触发DOM更新
12. 用创建好的实例调用 beforeRouteEnter 中传递给 next 的函数