上篇文章我們發現有些不使用任何接口的頁面，在不登陸狀态下是可以進行通路的，是以本篇文章解決一下這個問題。
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。