vue項目常見之五：路由攔截器（permission），導航守衛

// 處理路由攔截器 導航守衛
import router from '../router'
import progresss from 'nprogress'
import 'nprogress/nprogress.css'
// 全局前置守衛  當 路由發生變化時 這個方法里的回調函數就會執行
router.beforeEach(function (to, from, next) {
  progresss.start() // 開啟進度條
  // 權限攔截 認為有token 讓過去 沒token不讓過
  if (to.path.startsWith('/home')) {
    //   確定要去檢查的范圍
    let token = window.localStorage.getItem('user-token')
    if (token) {
      next() // 放過
    } else {
      next('/login') // 跳轉到登錄頁
    }
  } else {
    next() // 直接放過
  }
})
router.afterEach(() => {
  // setTimeout(() => progresss.done(), 1000)
  progresss.done()
  // 關閉進度條
})