上篇文章我们发现有些不使用任何接口的页面，在不登陆状态下是可以进行访问的，所以本篇文章解决一下这个问题。
1.使用导航守卫
导航守卫是在路由定义之后，进行使用之前进行的相关函数操作。类似中间件，可以说实际上他就是一个钩子函数的中间件。
// 导航守卫
router.beforeEach((to, from, next) => {
// 打印to，查看内容
console.log(to)
// 将导航守卫看作一个中间件，不执行next()无法进入页面
next()
})
进入新建广告位页面，查看打印结果，可以查询到新建广告位功能的路由信息：
所以我们要做的就是在路由中添加信息，根据我们添加的信息进行判断是否可以进行登录。
2.添加路由元信息
查询官方文档中，meta作为路由元信息被我们查询。通过配置meta字段来抓取登陆验证节点。
官方文档中的方法是想要哪个页面需要被路由限制，就对哪个页面添加路由元信息。而我们的admin端除了登录页面，都需要被路由限制，所以在登陆页面添加isPublic，意为只有login页面是公众访问页面，其他均为需登录的管理员页面。
测试，分别在新建广告位页面和登陆页面打印信息：
（1）新建广告位页面，数据没有变化：
（2）登录页面，可以看到我们定义的isPublic：
3.设置路由守卫函数
// 导航守卫
router.beforeEach((to, from, next) => {
// 如果没有定义的isPublic和token值，则跳转到登录页
if(!to.meta.isPublic && !sessionStorage.token){
return next('/login')
}
// 否则进入该页面
// 将导航守卫看作一个中间件，不执行next()无法进入页面
next()
})测试，进入新建广告位页面，此时直接输入链接已进不去了。
先登录再使用sessionStorage.clear()，刷新页面再测试，直接跳转到登陆页面。
完成。
4.总结
到此，admin端基本内容已经完善，后续有新东西继续补充。
下篇文章我们开启web端编辑，更加深入了解vue的组件和UI。
