一、导航守卫

导航守卫分为：全局守卫、组件导航守卫以及路由导航守卫。下面分别来进行讲解。

1. 全局守卫：

全局守卫有beforeEach 和afterEach ，即在跳转前和跳转后的导航守卫。
首先看下beforeEach，示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
router.beforeEach((to, from) => {
  if (
    // 检查用户是否已登录
    !isAuthenticated &&
    // ❗️ 避免无限重定向
    to.name !== 'Login'
  ) {
    // 将用户重定向到登录页面
    return { name: 'Login' }
  }
})

如果beforeEach的回调函数中返回的是true或者什么都没返回，则跳转到默认的路由，否则跳转到返回的路由。
afterEach导航路由为已经改变完成后的守卫。示例代码如下：

1
2
3
4
router.afterEach(function(to,from){
  console.log('to:',to);
  console.log('from:',from);
})

2. 组件内导航守卫：

  • onBeforeRouteLeave：在离开当前路由前调用。如果返回false，将会取消路由离开。比如：
    1
    2
    3
    4
    beforeRouteLeave (to, from) {
      const answer = window.confirm('本页面还未保存，您确定要离开吗？')
      if (!answer) return false
    }
  • onBeforeRouteUpdate：在路由发生更新时调用，比如从/user/1更新到/user/2，就会执行该守卫方法。一般这个方法用的比较少。

3. 路由导航守卫：

在定义路由的时候，可以指定beforeEnter导航守卫，示例代码如下：

1
2
3
4
5
6
7
8
9
10
const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

二、路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false },
      }
    ]
  }
]

那么以后可以通过路由.meta 访问到元数据。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
router.beforeEach((to, from) => {
  // 而不是去检查每条路由记录
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath },
    }
  }
})