ページがリダイレクトされたときにユーザーがログインしているかどうかを確認するためのVueルーティングガード+ Cookie-(1)Cookie

Vueプロジェクトでは、ユーザーが正常にログインすると、ユーザー情報がCookieに保存されてからホームページにジャンプします。ユーザーがログインしていない場合は、ページアドレスを直接入力すると、ルーティングガードがユーザー情報がCookieに存在するかどうかを検出します。 、ログインページにリダイレクトして、ユーザーをログインさせます。次に、Cookieメソッドの構成から始めます。

まず、プロジェクトに新しいutil / cookie.jsファイルをjsとして作成し、cookieメソッドを保存します。

 

 

 次のコードをcookie.jsに記述します。コードは3つのメソッドをカプセル化します:setCookie:store cookie; getCookie:read cookie; clearCookie:delete the specified cookie;最後にこれらの3つのメソッドをグローバルコール用にエクスポートし、コードの各行正確にはどういう意味ですか?次のチュートリアルを見ることができます:cookieチュートリアル1cookieチュートリアル2、説明は非常に詳細です。

/ * * 
 * Cookieを保存するための@description 
 * @param {Object} Cookieを保存する必要があるjsonオブジェクト
 * @param {Number}日デフォルトで保存する日数
 * / 
function setCookie(json、days){
     // 有効期限を設定する 
    let data = new 日付(
         新しい日付()。GetTime()+日* 24 * 60 * 60 * 1000 
    ).toUTCString(); 

    forvar key in json){ 
        document.cookie = key + "=" + json [key] + " ; 
 expires = "+ data; 
    } 
} 

/ * * * @description get cookie 
 * @param {String} name need to get cookie key 
 * / 
functiongetCookie(name){
     var arr = document.cookie.match(new RegExp( "(^ |)" + name + "=([^;] *)(; | $)" ));
    もし(ARR!= nullの){
         リターンアンエスケープ(ARR [2 ])
    } {
         リターン ヌル
    } 
} 

/ * * 
 * @description删除クッキー
 * @param {文字列}名前需要删除クッキー的キー
 * / 
関数clearCookie(名) { 
    let json = {}; 
    json [名前] = '' ; 
    setCookie(json、 -1 
}
デフォルトの
エクスポート{ 
    setCookie、
    getCookie、
    clearCookie 
}

次に、main.jsに記述したcookie.jsを導入し、Vue.prototypeを使用してcookieフィールドをグローバル変数として設定します

 

 概要が完了したら、this.cookieを使用してCookieを追加または削除できます。任意のページのメソッド名(値)。

this.cookie.setCookie()//存クッキー

this.cookie.getCookie()//读cookie

this.cookie.clearCookie()//删cookie

まず、プロジェクトにログインページLogin.vueを作成して、ログインページを作成します。ログインに成功したら、this.cookie.setCookieを使用してユーザー情報をCookieに保存します。


      パスワード: "" 
    }; 
  }、
  メソッド:{     
    login(){
        
        


    
        if(!this .name){ 
          alert( "アカウントを入力してください" );
           return ; 
        } 
        if(!this .password){ 
          alert( "Please enter your password" );
           return ; 
        } 
        ifthis .password && this .name){
           // json形式でsetCookieメソッドに情報を送信します。このメソッドは、単一のデータストレージモードでjsonをループし、それをcookieに複数回保存します
      //注:cookieは
、loginInfo = としてjsonへの直接保存をサポートしていません{ LoginName:this .name、 openId: "asfafsfsfsdfsdfsdfdsf" } // setCookieメソッドを呼び出し、同時に保存するデータを渡し、日数を保存します this .cookie.setCookie(loginInfo、7 alert( "Login successful" // ホームページにジャンプします this。$ Router.replace( '/' } } } }; </スクリプト>

ログインに成功すると、保存されたLoginName、openId、およびそれらの有効期限がブラウザのCookieに表示されます。

 

 

 

 ログイン成功後、home.vueページにジャンプし、this.getCookie( "LoginName")を介してログイン名を取得しました。

 

 

 

 次に、ログアウトをクリックしてCookieをクリアし、ログインページに戻る必要があります。

 

 ログアウト後にクリックしてCookieをクリアし、ログインページにジャンプして、Cookieを表示します

 

 空白であることがわかりました。

これまでのところ、最初のステップは基本的に完了しており、ジャンプするときにCookieにログイン情報があるかどうかを確認する必要があります。ない場合は、ジャンプを許可せず、ログインページにジャンプします。それはルーティングガードを使用することです。

 

おすすめ

転載: www.cnblogs.com/songzxblog/p/12723892.html