1.為什么需要路由攔截器
為了防止用戶在知道組件名稱的情況下，沒有登錄而直接進入相應的頁面下，所以要為路由設置一個攔截器，來判斷用戶是否登錄過。
2.怎樣設置路由攔截器：
分析：當我們第一次登錄的時候，向服務器發送請求，服務器會給我們一個token標記符（這個token時前后台約定好的一個值），客戶端拿到這個token后將它保存到本地localstorage或vueX中，當我們再次訪問時，將這個token在攜帶給服務器。服務器會通過算法校驗這個token的合法性（這個token會有一個有效期），如果合法，則不干涉，不合法則強制跳轉到登錄界面。
import axios from 'axios'
const baseURL = 'http://localhost:8888/api/private/v1/'
axios.defaults.baseURL = baseURL
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 將token給到一個前后台約定好的key中，作為請求發送
// mytoken是我們第一次登錄成功后，服務器會返回給我一個token值，我們將它保存在localstorage中
let token = localStorage.getItem('mytoken') // 獲取本地存儲的token值
if (token) { // 判斷token值是否存在
// 個人認為在此期間可以再次判斷 token是否還在有效期內，如果在，就將token放在請求頭中；如果不在，就將token= '',並返回錯誤信息
config.headers['Authorization'] = token // 如果token值存在，就將token值放在請求頭中，發送給服務器
}
return config
}, function (error) { // 如果不存在，就返回一個錯誤信息
// Do something with request error
return Promise.reject(error)
})
3.當我我們設置了攔截器后，我們可以注冊一個全局守衛（在main.js入口文件中注冊），防止未登錄的用戶跳轉到其他頁面
// 注冊一個全局守衛。作用是在路由跳轉前對路由判斷，防止未登錄的用戶跳轉到其他頁面
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('mytoken')
// 如果已經登錄，那我不干涉你，讓你隨便訪問
if (token) {
next()
} else {
if (to.path !== '/login') {
// 如果沒有登錄，但你訪問其他需要登錄的頁面，那我就讓你跳到登錄頁面去
next({path: '/login'})
} else {
// 如果沒有登錄，但你訪問的login，那就不干涉你，讓你訪問
next()
}
}
})