以下路由導航守衛和axios攔截，僅提供參考

1. 導航守衛：攔截元件

• 導航守衛就是我們進行某些頁面的時候需要判斷當前使用者是否登入過，如果登陸過，則可以跳轉，否則重定向到登入頁面

• 導航守衛只是前端做出判斷，檢查請求頭中是否帶有token，並不能判斷token是否失效

//新增路由守衛:：通過判斷來決定當前的路由跳轉到底能不能進行，這種守衛，只要進行路由的跳轉就會自動的觸發，不能人為呼叫
    router.beforeEach((to, from, next) => {     
      // 判斷當前使用者是否登陸，如果登陸了則可以跳轉，否則重定向到登陸頁
      // 獲取使用者登陸之後的token，進行token的判斷
      if (to.path !== '/login' || to.path !== '/register') { // 非登入頁面驗證是否存在token
        let token = localStorage.getItem('token')
        if (token) {
          next()
        } else {
          Toast('請先登陸')
          // 說明沒有登陸，則重定向到登陸頁
          next({ name: 'login' })
        }
      } else {
        next()
      }
    })
 

2. axios攔截器：攔截後端介面

• 每次傳送請求之前判斷vuex或者本地儲存中是否存在token

• 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登入情況

• 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷

/(1)新增請求攔截器
每一個我們自己封裝的axios請求都會經過這個攔截器
axios.interceptors.request.use(function (config) {
// 在傳送請求之前做些什麼:我要看看有沒有token,如果有，則以請求頭的方式進行傳遞
let token = localStorage.getItem('toutiao')
if (token) {
// 設定請求頭
config.headers.Authorization = token
}
return config;
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
});

(2)axios攔截器驗證完token後，進行響應

// 新增響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應資料做點什麼
console.log(response)
if(response.data.code===401){
// this.$router.push({name:'Login'})
window.location.href='#/login' //這裡路由跳轉到登入頁面，window.location.href改成實際業務的路由跳轉方法
}
return response;
}, function (error) {
// 對響應錯誤做點什麼
return Promise.reject(error);
})

3.導航守衛和axios攔截器的區別

• 導航守衛就是路由守衛，想進入一個頁面時，判斷是否有許可權訪問(有token，就有許可權，沒有就返回)，但並不能判斷是否失效。

• axios攔截器是傳送請求判斷token的有效性，如果有就將token放在請求頭裡。

• 導航守衛和axios攔截器一起使用，進而來確保登入的狀態