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 的函数