VUE +のaxios（インターセプタ）がルーティングHTTPインターセプトインターセプト+ルータ（ビス切片）を実装+要求は効果をロード付属します

axiosインターセプタインターセプタ

// interceptors.js 

// オフローディングローディングローディングを開始するVUE Axios構成要求終了要求
 // HTTPリクエストの要求インターセプタ、トークン値、トークン値が配置されている 
インポートAxios から 「Axios 」
インポートルータから 「../router 」
インポートローディング} { から ' 要素UI ' 
インポートプロミスから ' 約束' 
のvar loadinginstace
 // HTTPリクエストインターセプタ
axios.interceptors.request.use（
    設定 => {
         // 要素読み込みUIメソッド 
        loadinginstace =Loading.service（{
         ロック：真、
        テキスト：' 読み込み' 、
        スピナー：' EL-アイコンローディング' 、
        背景：' RGBA（0、0、0、0.3）' 、
        customClass：" osloading " 、
        フルスクリーン：真 
        } ）
        リターン設定
    }、
    エラー => { 
        loadinginstace.close（）
        戻りPromise.reject（誤差）
    } 
）

//HTTP応答サーバーの応答ブロッカー
 // ここでは401インターセプトエラー、および再登録ページジャンプ再取得トークン
axios.interceptors.response.use（
    レスポンス => {
       IF（response.data.data && response.data.data.ecode == ' 401 ' ）{ 
        loadinginstace.close（）
        router.replace（{ 
            パス：' ログイン/ ' 、
             // {リダイレクト：クエリrouter.currentRoute.fullPath} // ログインは、現在のページの成功後ビューに飛び込みました
        }）
      } 他{ 
        loadinginstace.close（）
        戻り応答; 
      } 

    }、
    エラー=> { 
        Loadinginstace.close（）
        IF （error.response）{
             スイッチ（error.response.status）{
                 ケース 401 ：
                     // ここトークンクリアするためにコードを書く
                    router.replace（{ 
                        パス：' /ログイン' 、
                         // クエリ：{リダイレクト：router.currentRoute.fullPathを} // ログイン成功は、現在のページの表示を跳んだ後
                    }）
            } 
        } 
        を返すPromise.reject（error.response.data）
    } 
）; 

エクスポートデフォルト axios;

ルーティング傍受

// main.jsは 
AUTHをインポートから ' @ / API / AUTH ' 

; auth.refreshAuth（）
router.beforeEach（（に、より次に、）=> {
   IF（to.matched.some（レコード=> record.meta。 requireAuth））{ //はルート権限をログインするか否かを判断 
    isLogin =せ）（auth.checkAuthを  
     のiF（isLogin）{ // 現在のトークンがあるか否かを判断する
      （次へ）; 
    } 他{ 
      次に（{ 
        パス：' /ログイン' 、
      }）
    } 
  } 
  そうでなければ{ 
    次に（）; 
  }
}）;

auth.js

// auth.jsの
 CONST AUTH = { 
    ユーザー：{ 
        認証：偽
    }、
    checkAuth（）{ 
        戻り 、これは.user.authenticated 
    、} 
    ）（refreshAuthを{ 
        _tokenせ = sessionStorage.getItem（' トークン' ）。
        もし（_token）{
           この .user.authenticated = 真
        } 他{
           これは = .user.authenticated 偽
        } 
    }、
} 

輸出デフォルトの認証;

router.js

輸入ヴューから ' VUE ' 
輸入ルータから ' VUE-ルータ' 
Vue.use（ルータ）
constのルート= [ 
    { 
    ：パス' /ログイン'、名前：' ログイン' 、
    コンポーネント：解決 =>必要（[ " @ /ページ/カスタム/ログイン' ]、解決）
  }、
  { 
    パス：' / infAddition '名称：' infAddition ' 、
    成分：解決 =>（[必要"@ /ページ/カスタム/ infAddition ' ]、解決）
  }、

  { 
    パス：' /ホーム'名前：' ホーム' 
    コンポーネント：解決 =>を必要と（[ ' @ /ページ/カスタム/ホーム" ]、解決）
  } 、
  { 
    パス：' / ' 、
    名称：' メインフレーム' 、
     // 根目录重定向 
    リダイレクト：{パス：' /ホーム'、クエリ：{SCHEMAID：' 973e-36c0d61b48a5 ' }}、
    メタ：{requireAuth：真}、
    コンポーネント：解決 =>必要（[ ' @ /ページ/システム/メインフレーム' ]、解決）、
    子供：[ 
      { 
        パス：' /ホーム'、名前：' ホーム' 、
        コンポーネント：解決 =>必要（[ ' @ /ページ/カスタム/ home.vue ' ]、決意）
      }、
    ] 
  }、
] 
constの vueRouter = 新しいルータ（{
     ベース：__dirname、
    モード：" 歴史"、// 启用浏览器的历史记录
   // モード： "ハッシュ"、 
    scriollBehavior：（）=>（{X：0、Y：0 }）、
    ルート
}）
インポートAUTH から ' @ / API / AUTH ' 
vueRouter。 beforeEach（の関数（、から、次）{
     CONST nextRoute = [ ' / '、' /ホーム'、' / infAddition '、' /テイク'、' /提出' ]
     CONSTトークン= sessionStorage.getItem（' トークン' ）
     であれば（nextRoute.indexOf（to.path）> = 0 ）{
         場合（トークン== NULL ||トークン== "" ）{ 
            次（{パス：' /ログイン' }）
        } 他{ 
            次（ ）
        } 
    } そうでなければ{ 
        次の（）
    } 
}）

エクスポートデフォルトvueRouter