【九月打卡】第11天 Vue3 + TS 仿知乎专栏企业级项目

课程名称：2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节： 6-15 Vue router 添加路由守卫 - 使用元信息完成权限管理

主讲老师：张轩

课程内容：

添加路由守卫来保证未登录的状态下的一些页面权限

课程收获：

因为不是每个页面都必须要登录才能查看的，也有一些页面不需要登录就可以查看。所以我们要使用路由原信息meta添加一些标识符来保证每个页面不同的权限性。

路由元信息：定义路由的时候可以配置 meta 字段

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

children: [

{

path: 'bar',

component: Bar,

// a meta field

meta: { requiresAuth: true }

}

]

}

]

})

　　解析：

　　1、meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名称，用来标记这个路由信息是否需要检测，true 表示要检测，false 表示不需要检测（这个名称随便起，比如我自己的就起的 requiresId，建议起个有意义的名称）

　　2、if (to.matched.some(record => record.meta.requiresAuth) )，如果对这类写法不熟悉，可以去看看es6的箭头函数，这句话就是返回遍历的某个路由对象，我们定义为为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测它的meta对象是不是有requiresAuth这个属性，且为true，如果满足上述条件，就确定了是这个/foo/bar路由。