|
1. 前言：
在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等，虽然可以采用路由匹配的方式 if(to.path === '/url')，很显然当需要验证的路由较多时，会增加太多的if判断，这不利于代码维护，此时可在定义路由的时候可以配置 meta 字段，通过设置一些属性值，可以便于我们对当前的路由做一些处理，也可以使用next()重定向到其他路由。
2. 使用，在定义路由时定义一个需要验证的meta信息 meta: {requiresAuth: true}
路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录，例如，根据下面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录，
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
一个路由匹配到的所有路由记录会暴露为 $route 对象 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段，
然后在全局导航守卫中检查元字段是否需要验证
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
}) | 
转播
