Vueリクエストインターセプターの設定方法の詳しい説明

// http リクエスト インターセプター、トークン値がある場合はトークン値を設定します import axios from 'axios'
'promise' から Promise をインポートします
'./utils' から util をインポートします。
'./../store/index' からストアをインポートします。
constサービス = axios.create({
    タイムアウト: 60000, // リクエストタイムアウトヘッダー: {
        // 承認: 承認、
        'コンテンツタイプ': 'application/json;charset=UTF-8'
    }
});
// http リクエスト インターセプター service.interceptors.request.use(
    設定 => {
        tokenExist = util.tokenExist(); とします。
        if (トークンが存在する) {
            // bus.$emit('toggleloading', true) //読み込み中を表示
            //トークンが存在する場合 config.headers['Authorization'] = `Bearer ${util.getToken()}`;
        }
        // Toast.loading({
        // メッセージ: '読み込み中...',
        // 期間: 0,
        // クリック禁止: true
        // });
        設定を返します。
    },
    エラー => {
        Promise.reject(エラー);
    }
）
// http 応答サーバー応答インターセプター、
//ここで401エラーをインターセプトし、ログインページに戻ってトークンを再度取得します
サービスインターセプターレスポンスの使用(
    レスポンス => {
        応答ステータス === 200 の場合
            //通信成功// Toast.clear();
            /****************
             * response.data.status === 0 エラー* response.data.status === 100 成功* response.data.status === 401 トークンの有効期限が切れました*
             * *************/
            // bus.$emit('toggleloading', false) // 読み込みを非表示にする
            （レスポンスデータの状態 === 401）の場合{
                //トークンの有効期限が切れている場合は、ログインにジャンプします Message.error("ログインの有効期限が切れています。もう一度ログインしてください!");
                store.commit('SET_TOKEN', '');
                util.goLogin();
            } そうでない場合 (response.data.state === 0) {
                // メッセージ.error(response.data.message);
                応答データを返します。
            } それ以外 {
                応答データを返します。
            }
        }
    },
    エラー => {
        //リクエストが失敗しました//;
        定数レスポンス = error.response;
        （応答ステータス === 401）の場合{
            // Toast.fail(response.data.message);
            Message.error("ログインの有効期限が切れています。もう一度ログインしてください!");
            util.goLogin();
        } そうでない場合 (response.status === 403) {
            $ルーター.push({
                名前: '403'
            });
        } それ以外 {
            // Toast.fail(response.data.message ? response.data.message : 'システムエラーです。管理者に連絡してください');
            // メッセージ.error({
            // メッセージ: 'サービスがありません。管理者に連絡してください'
            // });
        }
        Promise.reject(error) を返します。
    }
);
デフォルト サービスをエクスポートします。

'./request' からリクエストをインポートします。
// './../store/index' からストアをインポートします。
定数http = {
    リクエスト(設定) {
        リクエスト(config);
    },
    投稿(URL, データ) {
        // if (データインスタンスオブオブジェクト) {
        // }それ以外{
        // データ = {
        // ...データ
        // };
        // }
        リクエストを返す({
            URL、
            メソッド: 'post'、
            データ
        });
    },
    postFile(url, データ, コンテンツタイプ) {
        リクエストを返す({
            URL、
            メソッド: 'post'、
            データ、
            コンテンツタイプ
        });
    },
    get(url, パラメータ) {
        リクエストを返す({
            URL、
            メソッド: 'get'、
            パラメータ
        });
    },
    （URL、データ）を置く{
        リクエストを返す({
            URL、
            メソッド: 'put'、
            データ
        });
    },
    削除(url) {
        リクエストを返す({
            URL、
            メソッド: '削除'
        });
    },
    ダウンロード(url, パラメータ) {
        リクエストを返す({
            URL、
            メソッド: 'get'、
            パラメータ、
            レスポンスタイプ: 'blob'
        });
    },
    ダウンロードポスト(url, データ) {
        リクエストを返す({
            URL、
            メソッド: 'post'、
            データ、
            レスポンスタイプ: 'blob'
        });
    }
};
デフォルトのhttpをエクスポートします。

'../store/index' からストアをインポートします。
util = { とする
    //トークンを取得
    トークンを取得する() {
        store.getters.token を返します。
    },
    //トークンが存在するか判断する tokenExist() {
        フラグを立てます。
        トークンを store.getters.token とします。
        if (トークン && トークン !== '') {
            フラグ = true;
        } それ以外 {
            フラグ = false;
        }
        トークンを返します。
    },
}
デフォルトのユーティリティをエクスポートする

「vue」からVueをインポートします
「vuex」からVuexをインポートします
'vuex-persist' から VuexPersistence をインポートします。
'./db' から db をインポートします
Vue.use(Vuex)
//vuex 状態の永続性 const vuexLocal = new VuexPersistence({
    ストレージ:window.localStorage
})
定数ストア = 新しい Vuex.Store({
    州：{}、
    変異:{},
    アクション:{},
    モジュール:{
        デシベル
    },
    プラグイン:[vuexLocal.plugin]
})
デフォルトストアをエクスポート

定数db = {
    州： {
        トークン: ''、
    },
    ゲッター:{
        トークン:状態 => 状態.トークン
    },
    突然変異:
        //トークンを保存
        setToken: (状態、値) => {
            state.token = 値
        }
    },
    アクション: {}
}
デフォルトDBをエクスポート

 「../common/http」からhttpをインポートします。
/************ログインと登録*************/
//テストインターフェース関数text(params){
    http.get("api/Test/GetList", パラメータ) を返します
}
//ログイン関数Login(params) {
    http.post("api/Login/Login", パラメータ) を返します
}
// グラフィック検証コードを取得する function GetValidateCode(params) {
    http.post("api/Login/GetValidateCode", パラメータ) を返します
}
// 電話認証コードを取得します。注: 事前にヒューマンマシン認証を検証する必要があります。そうしないと、SMS によって悪意を持ってスワイプされるリスクがあります。function GetPhoneCode(params) {
    http.post("api/Login/GetPhoneCode", パラメータ) を返します。
}
//登録検証情報関数 RegisterUserVerify(params) {
    http.post("api/Login/RegisterUserVerify", パラメータ) を返します
}
// 登録、パスワードの設定、ユーザー情報の登録 function RegisterUserInfo(params) {
    http.post("api/Login/RegisterUserInfo", パラメータ) を返します。
}
// パスワード確認名と電話番号を忘れた場合 function ResetPasswordVerify(params) {
    http.post("api/Login/ResetPasswordVerify", パラメータ) を返します
}
// パスワードを忘れた場合 パスワード更新関数 ResetPassWord(params) {
    http.post("api/Login/ResetPassWord", パラメータ) を返します。
}
輸出 {
    ログイン、
    文章、
    電話コードを取得、
    登録ユーザー確認、
    検証コードを取得、
    パスワードをリセット、確認、
    パスワードをリセット、
    ユーザー情報の登録
}