ログイン認証プロジェクトノート

　　VUEで簡単なログイン認証機能を実行してください。

プロジェクトのディレクトリ構造は次のとおりです。

ログインコンポーネント

　　ログインに成功すると、ローカルストレージおよび保存するための保存、およびジャンプを行います。

    非同期（E）{handleLogin 
      ; e.preventDefault（）
      のlet parmas = { 
        ：ユーザー名この.model.username、
        passwold：この.model.passwoldを
      }; 
      constのRESは。=待つこの $ http.get（ "/ API /ログイン。" 、parmas）; 
      CONST {コード、トークン、マッサージ} = res.data;
       //コードが== ' 0'ログインが成功であることを示し、ローカルストレージ、ストレージ及び格納ジャンプ。
      //そうでなければ、エラーメッセージをポップアップ
      IF（コード== "0" ）{
         この $のstore.commit（ "setToken。" 、res.data.token）; 
        localStorage.setItem（ "トークン"、トークン）;
         // 。認証は、ログインページにリダイレクトするページからジャンプする必要がある場合=この$ route.query.redirect、それがログインページに直接ジャンプすることがある場合は、[ログイン]をクリックし、その後、=リダイレクト「/」 
        constのリダイレクト= この $ route.query.redirect || "/"。;
         この$のrouter.push（リダイレクト）;. 
      } 他に{ 
        constのトーストは = この$ createToastを（{。
          時間： 2000 、
          TXT：マッサージ || "ログインに失敗しました" 、
          タイプ： "エラー" 
        }）; 
        toast.show（）; 
      } 
    }

格納

　　ログイン時に行われたトークンの永続的なデータ処理でのログインコンポーネントでは、トークンの紛失を防止するためのページを更新。トークンの初期値に格納するための時間が取られます

キーコードをstore.js：

インポート「VUE」からのVue 
からインポートVuex「vuex」

Vue.use（Vuex）

輸出デフォルト 新しい新しいVuex.Store（{ 
  {：州立
    // トークンデータの永続性の喪失を防止するためにページを更新 
    トークンを：localStorage.getItem（「トークン」） || '' 
  }、
  変異：{ 
    setToken（トークン州、）{ 
      state.token = トークン
    } 
  }、
  アクション：{ 

  }、
  ゲッターは：{ 
    // トークンが存在し、算出した特性がisLogin設定
    isLogin（状態）{
       返します！ ！state.token 
    } 
  } 
}）

ルータ

　　認証の必要性を識別するためmate.auth内のルート[]。認証が必要とされているかどうか、それがログインしているかどうかによって異なる動作をするために、グローバルルーティングガードすべきrouter.beforeEach。

router.jsコード：

「VUE」からの輸入のVue 
からインポートルータ「VUE-ルータの
からインポートホーム「./views/Home.vue」
からの輸入ログイン「./views/Login.vue」; 
以下からの輸入店「./store」; 
Vue.use（ルータ）

CONSTルータ = 新しいルータ（{ 
  モード： '歴史' 、
  塩基：process.env.BASE_URL、
  ルート：[ 
    { 
      パス： '/' 、
      名称： 'ホーム' 、
      成分：ホーム
    }、
    { 
      パス： '/ログイン' 、
      名：、
      コンポーネント：ログイン
    }、
    { 
      パス： '/について' 、
      名前： '約' 、
      メタ：{AUTH：trueに }、// についてログイン認証が行われる必要があります 
      ：（）=>インポート（コンポーネント/ * webpackChunkName：「についての" * / './views/About.vue' ）
    } 
  ] 
}）
router.beforeEach（（に、次に、から） => {
   // to.meta.auth音がログインを行うに示し
  // 不要なダイレクト次に
  IF （to.meta.auth）{
     // store.state.token表現次に直接ログインした
    //ログインパラメータはto.pathに直接ジャンプリダイレクト運ぶ/ログインかつ容易にログインしていないジャンプ
    IF （store.state.token）{ 
      次に（）; 
    } 他{ 
      次に（{ 
        パス：「/ログイン」、
        クエリ：{リダイレクト：to.path} 
      }）
    } 
  } そうでなければ{ 
    次に（）; 
  } 
}）
エクスポートデフォルトルータ。

axios傍受　　

　　axiosインターセプトaxios.interceptors.request.useすべてのHTTP要求を、トークンがリクエストヘッダに、存在する場合。トークンが失敗した場合axios.interceptors.response.use傍受の応答axiosでは、と、削除して、ローカル・キャッシュ・メモリを保存し、ログインページにジャンプします。

HTTP-interceptors.jsコード：

インポートからAxios「Axios」; 
Storeからのインポート「./store」; 
ルーターからインポート「./router」;
 // インターセプトすべてのAxiosのhttpリクエスト、事前トークンのリクエストヘッダに 
axios.interceptors.request.use（設定=> {
   IF （store.state.token）{
     // トークンが存在する場合、要求に、ヘッダ 
    config.headers.token = store.state.token; 
  } 
  戻り値の設定; 
}）; 

// 応答ブロッカー前処理応答進み
axios.interceptors.response.use（
  レスポンス => {
     // コードが-1の場合、ユーザがキャンセルまたは期限切れされたことを示すことトークン
    // この場合は、再度ログインする必要があり、また、ローカルキャッシュ格納データ情報をクリアし、
    もし（== 200のResponse.Statusある{）
      CONSTデータ = response.data;
       IF（data.code == -1 ）{ 
        logoutFun（）
      } 
    } 
    戻り応答; 
  }、
  ERR => {
     IF（== err.response.status = 401）{ // 不正
      logoutFun（）
    } 
  } 
）; 

関数logoutFun（）{
   // ローカルキャッシュをクリアし、トークンにトークンを格納 
  store.commit（ "setToken"、 "" ）; 
  localStorage.removeItem（「トークン" ）;
   //ログインページに移動し、ユーザー出口またはトークンが失敗したルートを運ぶページには、ログイン利便後、このページに直接ジャンプ。
  router.push（{ 
    パス： "/ログイン" 、
    クエリ：{ 
      リダイレクト：router.currentRoute.path 
    } 
  }）; 
}

サーバミドルウェア

　　また、サーバは、ミドルウェア要求処理を行う必要があります。リクエストがない「/ API /ログイン」をreq.pathされていないと、トークンを有していない場合は、エラーステータスコード401が返されます。

キーコードをvue.config.js：

        app.use（（REQ、RES、次）=> {
           // 処理のみ始まるAPIをインターセプトするための要求を行う
          IF（/ ^ \ / API / .TEST（req.path））{
             IF（req.path == ' / API /ログイン'|| req.headers.token）{ 
              次に（）; 
            } 他{
               // エラーステータスコード401 
              res.sendStatus（' 401 ' ）
              次に（）; 
            } 
          } 他{ 
            次に（）; 
          } 
        }）

ログイン認証プロジェクトノート

おすすめ