上篇文章我们发现有些不使用任何接口的页面，在不登陆状态下是可以进行访问的，所以本篇文章解决一下这个问题。

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。