閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌導航守衛

假設有一個index的頁面，需要使用者登陸才能看到。那我們就不能讓使用者在路由上打,,,,/#/index時就直接進得去。

因此，我們需要設定requiresAuth還有router.beforeEach，讓路由改變的時候自動偵測該網頁是否需要驗證。

▌Router index.js設定

如果該頁面的訪問需要認證，就可以在routes中加上 meta: { requiresAuth: true}

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld

  }, {
    path: '/login',
    name: 'login',
    component: login,

  }, {
    path: '/index',
    name: 'index',
    component: index,
    meta: {
      requiresAuth: true
    }
  }]
})

▌MainJS設定：router.beforeEach

• 在main.js中加上router.beforeEach((to, from, next)，只要網頁發現路由改變就會觸發這行（to是要前往的路由，from是來自的路由）
• 如果偵測到to.meta.requiresAuth，就進入驗證
• index.js沒有this.$http，因此要是使用axios.post
• 該程式碼是以API的方式讓伺服器驗證登錄狀態，發api去後端問該帳號是否登陸
• next()表示可以前往下一頁
• next({path:'/login'})表示跳轉路由回登錄頁面

router.beforeEach((to, from, next) => {
  console.log("導航守衛啟動")
  if (to.meta.requiresAuth) {  //to表示要進去的那頁
    console.log("need auth")
    const api = `${process.env.APIPATH}/api/user/check`;
    axios.post(api).then(response => {
      console.log(response.data.success);
      if (response.data.success) {
        next()
      } else {
        next({
          path: '/login'
        })
      }
    });

  } else next()

})