VUEグローバルルーティングガード+トークンの検証+ノード

背面に取り付けjsonwebtoken NPM私jsonwebtoken --save

//キーを定義CONSTのSecretKey = 'itsource'; //文書に組み込まlogin.jsは=は（ 'jsonwebtoken'）を必要jwtconst JWTを導入しました

トークンCONSTトークン= jwt.signを生成する（秘密鍵、{expiresIn：60 * 60}）
の前端に
==>表す暗号化されたオブジェクトの秘密鍵===>定義キー{expiresIn：60 * 60}トークンの有効時間は、
フロントエンドトークンに送信されます

フロントエンドコード

<テンプレート> 
  の<div> 
    <EL-形式
      ：モデル= "ruleForm" 
      ステータスアイコン
      ：ルール= "ルール" 
      REF = "ruleForm" 
      ラベル幅= "100pxに" 
      クラス= "デモ-ruleForm" 
    > 
      <EL-フォーム-アイテム・ラベル= "用户名"プロップ= "ユーザ"> 
        <EL-入力V-model.number = "ruleForm.user"> </ EL-入力> 
      </ EL-フォーム項目> 

      <EL-フォーム項目ラベル= "密码"プロップ= "パス"> 
        <EL-入力タイプ= "パスワード" Vモデル= "ruleForm.pass"オートコンプリート= "オフ"> </ EL-入力> 
      </ EL-フォーム項目> 

      <エル・フォーム・アイテム・ラベル= "パスワードの確認"小道具= "checkPass"> EL-フォーム項目ラベル= "确认密码"プロップ= "checkPass"> 
        <EL-入力タイプ= "パスワード" Vモデル= "ruleForm.checkPass"オートコンプリート= "オフ"> </ EL-入力>
      </フォーム-EL-項目> 

      の<item-EL-フォーム> 
        <EL-ボタンタイプ= "一次"をクリックして= "submitForm（ 'ruleForm'）" @>提出する</ EL-ボタン> 
        をクリックして=「resetForm（ 'ruleForm'）@ <EL-ボタン">リセット</ EL-ボタン> 
      </フォーム-EL-項目> 
    </ EL-FORM> 
  </ div> 
</テンプレート> 

<SCRIPT> 
//導入QS 
インポートQSから" QS「; 

輸出デフォルト{ 
  データ（）{ 
    CheckAgeのvarが=（ルール、値、コールバック）=> { 
      （！値）場合は{ 
        ;（新しい新しいError（「ユーザ名が空白にすることはできません」））コールバックを返す
      } 

      でそれが準拠して条件を意味している場合//コールバック関数をトリガされたとき。このコールバック関数は、成功した識別され
      たsetTimeout（（）=> { 
        コールバック（）。
      }、500）。
    }。

    validatePass = VAR（ルール、値、コールバック）=> { 
      IF（値=== ""）{ 
        コールバック（新しい新しいError（ "パスワードを入力してください"））; 
      } {他
        this.ruleForm.checkPass ==（IF！」 "）{ 
          refs.ruleForm.validateFieldこの$（" checkPass "）; 
        } 
        コールバック（）; 
      } 
    }; 

    VAR validatePass2 =（規則、値、コールバック）=> { 
      IF（値==="「）{ 
        コールバック（新しいError（ "もう一度パスワードを入力してください"））; 
      }他のIF（！== this.ruleForm.pass値）{ 
        コールバック（新しいError（ "二度一貫性のないパスワードを入力してください！"））; 
      } {他の
        コールバック（）; 
      } 
    }、
    {返します
      //格納ユーザーデータがruleFormデータでない
      ruleForm：{ 
        パス： ""、 
          //ユーザーデータああ取得
          、this.ruleFormを//console.log(this.ruleForm.userを。パス ）
        checkPass： ""、
        ユーザ： "" 
      }、
      ルール：{ 
        パス：[{バリ：validatePass、トリガー： "ぼかし"}]、

        checkPass：[{バリ：validatePass2、トリガー： "ぼかし"}] 

        ユーザ：[{バリ：CheckAge、トリガーの"ぼかし"}] 
      } 
    }; 
  }、

  メソッド：{ 
    submitForm（formNameフォーム）{ 
      REFのこの$ [フォーム名] .validate（有効=> {。
        IF（有効）{ 
          アラート（） "送信！" ; 

          //ユーザ名が父親のオブジェクトとオブジェクト名ああで保存されている彼らは、最大保存され
          たletのparams = { 
            this.ruleForm.user、：ユーザー名
            パスワード：this.ruleFormを。通過
          }。
          console.log（のparams）; 
          //（このバックエンドアカウントの存在を確認するために、ユーザー名とパスワード）をバックエンドにリクエストパラメータを送る
          this.axios 
            .post（「http://127.0.0.1:666/login / checklogin」、qs.stringify（paramsは））
            .then（応答=> { 
               //データトークンバックエンドユーザー名、ユーザー名によって返されたトークンを受信
              LET {ERROR_CODE、理由、トークン、ユーザ名= response.dataを}; 
              //分析
              （ERROR_CODEは=== 0）{IF 
                //トークンは、ローカル・ブラウザ・ストレージに存在する
                window.localStorage.setItem（ 'トークン'、トークン）; 
                //ユーザ名、ローカルストレージに格納されています
                window.localStorage.setItem（「ユーザ名」、名）; 
                //発射成功プロンプト
                このメッセージ$（{。
                  タイプ：「成功」、 
          //そうでない場合偽の
          アラート（「！フロントエンドの検証の失敗は、バックエンドに提出することはできません」）; 
          falseを返します。
                  メッセージ：理由
                }）。
                //跳转到后端首页
                。この$のrouter.push（ "/"）; 
              }他{ 
                //弹失败提示
                。この$のmessage.error（理由）。
              } 
            }）
            .catch（ERR => {   
              にconsole.log（ERR）; 
            }）; 
        }他{
        } 
      }）。
    }、
    resetForm（formNameフォーム）{ 
      この$は、参考文献[フォーム名] .resetFields（）。
    } 
  } 
}。
</ SCRIPT> 

<スタイルlangは= "少ない"スコープ> 
.demo-ruleForm { 
  幅：30％。
  マージン：40ピクセルのオート10pxの自動; 
  最小幅：300ピクセル; 
} 
</スタイル>

　　main.jsで

// グローバルルーティングガードインターセプトすべてのルート 
router.beforeEach（（次に、からへ）=> {
   // 取得トークン 
  CONST = window.localStorage.getItemトークン（ 'トークン' ）;
   // トークンと
  IF （トークン）{
     / / ダイレクトリリース
    次の（）; 
  } 他 {   // それ以外の場合はノー
    // もしへのログインページ
    IF（to.path === '/ログイン' ）{
       // 直接のリリース
      次の（）; 
    } 他{
       // あなたが他のページに行けば、ログインページにジャンプ 
      （「操作後に再度ログインしてください！」Message.Errorアン）
       // ログインページに移動
      復帰次（{ "パス"： "/ログイン" }）
    } 
  } 
}）

  login.jsコードバッキング
エクスプレス= CONSTする（ "エクスプレス"を必要とする）; 
constのルータ = express.Router（）; 

// データベースに接続された注入モジュール 
ザは、（ "./接続"を必要CONST =コネクション）; 

// 導入JWTの 
CONST JWT （ 'jsonwebtoken' =必要とする）;
 // キー定義 
CONST =秘密鍵'itsourceを' ; 


// 均一第一クロスドメインの問題解決に応じて設定 
router.all（ "*"を、（REQ、RES、NEXT）=> {
   // クロスドメイン（最も主流の方法）を解決するために、応答ヘッダを設定 
  res.header（「アクセス制御-許可原点」、「*」を）; 
  次に（）; 
}）; 

/ *  
  ユーザー名とパスワードを確認し、正しいルーティングであります
* / 
router.post（ "/ checklogin」、（REQ、RES）=>{
   //がために、ユーザー名とパスワードを受信 
  LET {ユーザー名、パスワード} = req.body;
   // 設定されたSQL（ユーザー名とパスワードの問合せがあっても） 
  のconst = `SELECT * sqlstrアカウントからユーザー名=「$ {}ユーザ名」とパスワード= '$は{パスワード}' `;
   // SQL文の実行 
  connection.query（sqlstr、（ERR、データ）=> {
     IF（ERR）スローERRを;
     // 分析
    IF！（data.length）{
       // がある場合はありません 
      res.send（{ERROR_CODE：1、理由 ： " ！ユーザー名やパスワードを確認" }）; 
    } 他{
       // 存在している
      // 現在のアカウントデータに記録され
      データOBJ =定数[0 ];
       // 文字列に 
      CONST = objStr JSON.stringify（OBJ）;
       //は、新しいオブジェクトが作成 
      accountInfoのCONST = JSON.parse（objStr）;
       //はトークン生成 
       CONSTを=トークンjwt.sign （accountInfoの、秘密鍵、{expiresIn：60 * 60 }）
      res.send（{
         'ERROR_CODE'：0 、
         '理由'： 'ようこそログイン成功!!' 、
        トークン、
         "ユーザー名" ：accountInfo.username 
      }）
    } 
  } ）;      
}）; 

module.exportsは =ルータ。

VUEグローバルルーティングガード+トークンの検証+ノード

おすすめ