認証トークンVUE CLI

1.ルートジャンプのフロントエンドを設定します。

router.beforeEach（（により次に、）=> {
 IF（to.matched.some（ルート=> route.meta.authが））{
 //は通常のジャンプがある場合、トークンは、その後、存在するか否かを判断する
IF（のlocalStorage。 getItem（' トークン' ））{ 
次に（）
} 他{ 
次に（' /ログイン' ）
} 
} そうでなければ{ 
次に（）
} 
}）

ここでは、コードの完全な量をチェックアウト、コードの一部のみをリスト。

輸入ヴューから ' VUE ' 
輸入ルータから ' VUE-ルータ' 
インポートのHelloWorld から ' @ /コンポーネント/ HelloWorldの' 
インポートStudentsInfo から ' @ /コンポーネント/ StudentsInfo ' 
輸入ログインから ' @ /コンポーネント/ログイン' 

Vue.use（ルーター）

せルータ = 新しいルータ（{ 
  ルート：[{ 
      パス：' / ' 、
      名称：' HelloWorldの' 、 
      成分：HelloWorldの 
    }、
    { 
      パス：' / StudentsInfo ' 、
      名称：' StudentsInfo ' 、
      成分：StudentsInfo 
    }、
    { 
      パス：' /ログイン' 、
      名前：' ログイン' 、
      コンポーネント：ログイン
    } 
  ] 
}）

// ナビゲーションガード
 / / グローバルフロントガードrouter.beforeEachレジスタを使用するか否かを判断するユーザ・ログイン 
にrouter.beforeEach（（、から、次へ）=> {
   がiF（to.path ===' /ログイン'）{ 

    次の（）。
  } 他{ 
    せトークン = localStorage.getItem（' 許可' ）。
    もし（トークン=== ヌル ||トークン=== '' ）{ 
      次（' /ログイン' ）; 
    } 他{ 
      次の（）。
    } 
  } 
}）。

輸出デフォルトルータ;

2.ログインに成功し、トークンストア

ログイン（）{
 // 開始要求ログ 
axios.post（' /ユーザー/ログイン'、この .user）.then（RES => { 
にconsole.log（res.data）
// のlocalStorage後のトークンに格納されたトークンを受信します
 // 接頭辞を追加する必要があり 
localStorage.setItem（' トークン'、" ベアラ" + res.data.res.token）
}）
}

3.リクエストインターセプタ

限り、各トークンは、トークン要求を搬送するようにしましょう

// 設定要求インターセプタ 
axios.interceptors.request.use（設定=> {
 // はconsole.log（設定）
CONSTトークン= localStorage.getItem（「トークン」）
 IF （トークン）{
 // Authorizationヘッダに取得したトークンに設けられている 
config.headers.Authorization = トークン
} 
戻り設定
）}

応答ブロッカーの設定4

、トークンの問題を処理した結果に応じて、それは401を返さなければならない

// 設定応答ブロッカー 
axios.interceptors.response.use（RES => {
 // 処理結果
IF（res.data.res_code === 401 ） {
 // ジャンプログ 
router.replace（' /ログイン' ）
 // 削除トークン 
localStorage.removeItem（' トークン' ）
} 
の戻りRES 
}、ERR => {
 // インターフェースが正常であれば、行くerrは、err.response .status 401は、トークンを削除してジャンプするように操作されます 
）}

おすすめ