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チュートリアル1、cookieチュートリアル2、説明は非常に詳細です。
/ * * * Cookieを保存するための@description * @param {Object} Cookieを保存する必要があるjsonオブジェクト * @param {Number}日デフォルトで保存する日数 * / function setCookie(json、days){ // 有効期限を設定する let data = new 日付( 新しい日付()。GetTime()+日* 24 * 60 * 60 * 1000 ).toUTCString(); for(var 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 ; } if(this .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にログイン情報があるかどうかを確認する必要があります。ない場合は、ジャンプを許可せず、ログインページにジャンプします。それはルーティングガードを使用することです。