描述具體問題

需求

1. 業務系統通常需要登入才能訪問受限資源，在使用者未登入情況下訪問受限資源需要重定向到登入頁面；
2. 多個業務系統之間要實現單點登入，即在一個系統或應用已登入的情況下，再訪問另一個系統時不需要重複登入；
3. 在登入過期或失效時，需要重定向到登入頁面；
4. 使用者登入後，需對改使用者擁有的許可權進行功能和UI適配，如頁面、按鈕、連結、展示資訊的控制；

路由導航守衛

vue-router提供對應全域性前置和後置回撥函式，可以加入業務邏輯控制路由跳轉或或取消導航。

請求攔截

前端框架使用 axios 類庫作http請求，支援全域性對請求傳送前（request）與 響應後（response）進行注入攔截邏輯。可對傳送資料與響應資料進行適配。

 1 import axios from '../utils/axios'
 2 
 3 /**
 4  * 在請求傳送資料之前，對傳送資料進行轉換
 5  */
 6 axios.interceptors.request.use(function (config) {
 7   // 在這裡實現對請求前的處理
 8   return config
 9 })
10 
11 /**
12  * 在ajax接收響應資料之前，進行判斷是否響應未登入、如果未登入重定向到登入頁面
13  */
14 axios.interceptors.response.use(function (res) {
15   // 在這裡實現響應後的處理
16   return res
17 })