SPAのフロントエンドアクセス制御ソリューション

SPA：単一ページのWebアプリケーション（単一ページのWebアプリケーション）は、すべてのウェブ活動をリフレッシュルーティングハッシュせずに達成するか、ブラウザを介してジャンプするJS履歴APIを使用してHTMLページに制限され、フロントとリアのブラウジングを回避するために、AJAXを介してデータ通信を終了しますさんは運転経験のプロセスをユーザーに提供するために、リロードリフレッシュ。これは、フロントは、ルーティング層を引き継いだことを意味し、異なるページをレンダリングするために、MVCモジュールを呼び出すことによって、独自のフロントエンドを必要とします。

VueのフロントエンドMVVMフレームワーク、Vuex状態管理部、ヴュー・ルータのルート、Axios HTTPリクエストリポジトリを：ここでは使用する必要があります。

1、着陸イベントログイン

// 1.ログのトリガ・イベントの 
ディスパッチ（' ログイン' ）
 
// アクションの 
コミット（types.LOGIN_SUCCESS、res.data.data）

2、トークンの取得、のsessionStorageにBase64エンコード後の保存

// 変異
constの変異= { 
    [types.LOGIN_SUCCESS]（状態、データ）{ 
        state.authlock = falseに
    // 2.着陸成功コールバックのsessionStorage後にエンコードされた地元のBase64に、トークンを取得 
        しましょうトークン= Base64.encode（データ+ ' ：HIKDATAE ' ）
        （sessionStorage.setItem ' はUserToken ' ）、トークンは
     // 対象ページにジャンプルーティング 
        （router.push {名：' XXX ' }）
    }、
    [types.LOGOUT_SUCCESS]（状態）{ 
        state.authlock = trueに
    // ログアウト成功コールバック、ローカルトークンを削除
        sessionStorage.removeItem（' はUserToken ' ）
        router.push（{名：' ログイン' }）
    } 
}

図3に示すように、プラスのすべてのHTTPヘッダー認証トークン符号化（前方及び後方端部は規則合意することができます）

// Axiosフック要求（リクエスト） 
axios.interceptors.request.use（REQ => { 
    トークンましょう = sessionStorage.getItem（' ユーザー' ）     
     のIF （トークン）{         
         // 3.tokenが存在し、後に要求されたすべてのHTTP base64エンコーディングベルト後認可要求ヘッダトークン、背景トークン検証機関得る          
        req.headers.Authorization = ``基本$ {トークン}      
    } 
    req.data = qs.stringify（req.data）     
     戻りREQを
}、エラー => {
     戻りPromise.reject（エラー）
）}

4、要求をインターセプト：検証が401を返すことに失敗した場合の背景には、検証のための要求ごとにトークンを取得し、応答統一キャッチエラーにフックの先端がランディングページにジャンプします

// Axios要求フック（応答） 
axios.interceptors.response.use（RES => {
     戻りRESを
、エラー} => {
     IF （error.response）{
         スイッチ（error.response.status）{
         // 4.すべてのインターフェイストークンの検証が失敗した場合、バックグラウンドは401エラーコード、ログインページへの明確なトークン情報ジャンプ戻り、応答フックをチェック
            ケース 401 ：
                store.commit（types.LOGOUT）
                router.replace（{ 
                    パス：「/ログイン」
        }）
    } 
    } 
    戻りPromise.reject（エラー）
）}

図5に示すように、ルーティング傍受ジャンプ：ジャンプ任意の経路、そこローカルルーティングbeforeEachフックにトークンがあるかどうかチェックされていない場合、その後、ランディングページにジャンプ

// ルーティングフック（beforeEachジャンプフックを呼び出す前に、各ルート） 
にrouter.beforeEach（（、から、次へ）=> {
   IF（to.path === ' /ログイン' ）{ 
    sessionStorage.removeItem（' はUserToken ' ）
  } 
  LETユーザー = sessionStorage.getItem（' はUserToken ' ）
   IF（！to.pathユーザー&&！== ' /ログイン" ）{
     // ジャンプが任意の経路であるとき、トークンはリダイレクトするように、ローカルに存在しない場合ログインログインページ 
    ：次に（{パス「/ログイン」}）
  } そう {
    次の（）
  } 
}）

6、ログアウトログアウト：地元のsessionStorageの明確なトークン情報

// 変異
constの変異= { 
    ... 
    [types.LOGOUT_SUCCESS]（状態）{ 
        state.authlock = trueに
    // ローカルトークン削除し、成功したコールバックを登録 
        sessionStorage.removeItem（' はUserTokenを' ）
    router.push（{名：' ログイン' }）
    } 
}

SPAのフロントエンドアクセス制御ソリューション

おすすめ