目次
テクノロジースタック
一般的なプロセス
检查状态与跳转
获取用户信息
输入校验和发送登录请求
ホームページ ウェブフロントエンド jsチュートリアル Vue.js は SPA ログイン ページの例を作成します

Vue.js は SPA ログイン ページの例を作成します

Jun 23, 2017 am 10:55 AM
javascript vue.js ログイン プロセス

テクノロジースタック

  • vue.js メインフレームワーク

  • vuex 状態管理

  • vue-router ルーティング管理

一般的なプロセス

一般的なログインプロセスでは、フロントエンドソリューションは次のとおりです:

  1. ステータスの確認: ページに入るとき、またはルートが変更されたときにログインステータスがあるかどうかを確認します (cookie または local storage に保存された値)。ログイン ステータスがある場合は、ログイン情報 (uid、アバターなど) をクエリし、そうでない場合はログイン ページ (またはログイン ボックス) に移動します。ユーザー入力情報は正当です。 cookie或者本地存储的值);

  2. 如果有登录态则查询登录信息(uid,头像等...)并保存起来;如果没有则跳转到登录页;

  3. 在登录页面(或者登录框),校检用户输入信息是否合法;

  4. 校检通过后发送登录请求;校检不成功则反馈给用户;

  5. 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功则提示用户不成功;

  6. 用户做出注销操作时删除登录状态。

下面我根据列出的步骤一一分析如何做代码实现,所有在代码在中,并带有较详细注释帮助理解代码。

在此之前假设登录页面路由为/login,登录后的路由为/user_info。这样只需要在App.vue放好router-view用于存放和渲染这两个路由。

// component/App.vue
<template><div class="container" id="app">  <transition name="fade"><keep-alive>      <router-view></router-view></keep-alive>  </transition></div></template>
...
ログイン後にコピー

并做好vue-router配置:

// js/app.jsimport Vue from &#39;vue&#39;import VueRouter from &#39;vue-router&#39;import Login from &#39;../component/Login.vue&#39;import UserInfo from &#39;../component/UserInfo.vue&#39;

Vue.use(VueRouter);const router = new VueRouter({  routes: [{path: &#39;/login&#39;,component: Login
  }, {path: &#39;/user_info&#39;,component: UserInfo
  }]
})
...
ログイン後にコピー

检查状态与跳转

在两个时候我们需要检查状态:1.用户打开页面时; 2.路由发生变化时;

首先需要写好一个检查登录态的方法checkLogin

// js/app.js
...
var app = new Vue({  data: {},  el: &#39;#app&#39;,  render: h => h(App),
  router,
  store,  methods:{
    checkLogin(){      //检查是否存在session      //cookie操作方法在源码里有或者参考网上的即可      if(!this.getCookie(&#39;session&#39;)){//如果没有登录状态则跳转到登录页this.$router.push(&#39;/login&#39;);
      }else{//否则跳转到登录后的页面this.$router.push(&#39;/user_info&#39;);
      }
    }
  }
})
ログイン後にコピー

为了提升用户体验,当用户打开页面时前端需要检查他是否已经登录,不需要用户再次登录。这个实现很简单,我们在vue实例created钩子里写好:

// js/app.js
...
var app = new Vue({
  ...
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})
ログイン後にコピー

另外,路由发生变化时也需要检查登录,以下情景(路由变化)如果我们不检查登录态可能会发生错误:

  • 用户在进入页面时存在登录状态,但在做操作时正好登录过期了;

  • 用户手动删除了cookie/本地storage并做操作;

  • 用户在未登录的情况下手动输入(或者从收藏夹进入)某个需要登录的路由

  • 用户在已登录的情况下进入登录页路由

这些足够成为我们监听路由的理由,实现的话可以利用vuewatch功能:

// js/app.js
...
var app = new Vue({
  ...  //监听路由检查登录
  watch:{"$route" : &#39;checkLogin&#39;
  },  //进入页面时
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})
ログイン後にコピー

至此,我们就完成了一般过程中的第1步。接下来实现如何获取用户个人信息。

获取用户信息

在成功登录后,我们一般需要从后端显示用户的一些信息,比如昵称,头像,等级等等...获取的话很简单,发一个http请求从后端拉取;但是一般这些信息会在多的路由用到(比如uid一般都需要在各个后端接口中作为参数带上),所以需要保存到全局状态中(vuex):

// component/App.vue
...
<script>export default {
  ...
  mounted(){//组件开始挂载时获取用户信息this.getUserInfo();
  },  methods: {//请求用户的一些信息
    getUserInfo(){      this.userInfo = {nick: &#39;Doterlin&#39;,ulevel: 20,uid: &#39;10000&#39;,portrait: &#39;images/profile.png&#39;
      }      //获取信息请求
      ts.$http.get(url, {//参数"params": this.userInfo
      }).then((response) => {//Successif(response.data.code == 0){          this.$store.commit(&#39;updateUserInfo&#39;, this.userInfo); 
        }
      }, (response) => {//Error
      });

    }
  }
}
</script>
...
ログイン後にコピー

当然我们需要在之前配置好,比如在写在app.js或者单独写成store.js并在app.js引入(推荐):

// js/app.js// Vuex配置
...
const store = new Vuex.Store({  state: {domain:&#39;http://test.example.com&#39;, //保存后台请求的地址,修改时方便(比方说从测试服改成正式服域名)
    userInfo: { //保存用户信息
      nick: null,      ulevel: null,      uid: null,      portrait: null
    }
  },  mutations: {//更新用户信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})
...
ログイン後にコピー

输入校验和发送登录请求

为了防止一些不符合预期的字符和过于频繁的请求传到后台,前端要对用户的输入进行校验和防止重复请求。当然不同网站的合法字符不一样,这里只做为空时不合法的校验:

//component/Login.vue
<template><div class="login" id="login">
   ...<div class="log-email"><input type="text" placeholder="Email" :class="&#39;log-input&#39; + (account==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)" v-model="account"><input type="password" placeholder="Password" :class="&#39;log-input&#39; + (password==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)"  v-model="password"><a href="javascript:;" class="log-btn" @click="login">Login</a></div>
    ...</div></template><script>import Loading from &#39;./Loading.vue&#39;export default {  name: &#39;Login&#39;,
  data(){      return {          isLoging: false,          account: &#39;&#39;,          password: &#39;&#39;
      }
  },  components:{
    Loading
  },  methods:{      //登录逻辑
      login(){          if(this.account!=&#39;&#39; && this.password!=&#39;&#39;){              this.toLogin();
          }
      }

}</script>
...
ログイン後にコピー

这里的this.toLogin就是登录请求的方法,在post密码到后端时不是直接发送,一般会按照后端定的规则加密后在发送,比如哈希算法,例子进行了的双重哈希加密,引用了js/sha1.min.js

検証が成功した後にログイン要求を送信します。

ログインが成功した場合、session< /code> 情報はログイン ステータスを保存するためにバックエンド データから取得されます (ジャンプが必要な場合があります) ; ログインが失敗した場合は、ログイン ステータスを削除することをユーザーに通知します。ユーザーがログアウト操作を行ったとき。 <p></p></ol>🎜 以下では、リストされている手順に従ってコードを実装する方法を 1 つずつ分析し、すべてコード内で、コードの理解を助ける詳細なコメントを付けます。 🎜🎜これまでは、ログイン ページのルートは <code>/login、ログイン後のルートは /user_info であると想定されていました。このように、App.vuerouter-view を配置するだけで、これら 2 つのルートを保存してレンダリングできます。 🎜
...      //登录请求
      toLogin(){          //一般要跟后端了解密码的加密规则          //这里例子用的哈希算法来自./js/sha1.min.js          let password_sha = hex_sha1(hex_sha1( this.password ));          //需要想后端发送的登录参数          let loginParam = {              account: this.account,
              password_sha
          }          //设置在登录状态          this.isLoging = true;          //请求后端          this.$http.post( &#39;example.com/login.php&#39;, {          param: loginParam).then((response) => {if(response.data.code == 1){              //如果登录成功则保存登录状态并设置有效期              let expireDays = 1000 * 60 * 60 * 24 * 15;              this.setCookie(&#39;session&#39;, response.data.session, expireDays);              //跳转              this.$router.push(&#39;/user_info&#39;); 
            }
          }, (response) => {//Error
          });

...
ログイン後にコピー
🎜そして、vue-router 設定を行います: 🎜
<code class="javascript"><span class="hljs-comment">// component/UserInfo.vue
...
   logout(){      <span class="hljs-comment">//删除cookie并跳到登录页      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">true;      <span class="hljs-comment">//请求后端,比如logout.php      <span class="hljs-comment">// this.$http.post(&#39;eaxmple.com/logout.php&#39;)...      <span class="hljs-comment">//成功后删除cookie      <span class="hljs-keyword">this.delCookie(<span class="hljs-string">&#39;session&#39;);      <span class="hljs-comment">//重置loding状态      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">false;      <span class="hljs-comment">//跳转到登录页      <span class="hljs-keyword">this.$router.push(<span class="hljs-string">&#39;/login/&#39;);
    }
..</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/>
ログイン後にコピー
🎜ステータスを確認してジャンプします🎜🎜 次の 2 つの時点でステータスを確認する必要があります。1. ユーザーがページを開いたとき。 > 2. ルーティングが変更されたとき;🎜🎜まず、ログイン ステータス checkLogin をチェックするメソッドを作成する必要があります: 🎜rrreee🎜 ユーザー エクスペリエンスを向上させるために、ユーザーがページを開くと、フロントエンドで既にログインしているかどうかを確認する必要があります。ユーザーは再度ログインする必要はありません。この実装は非常に簡単で、vue インスタンスcreated フックに記述しました。🎜rrreee🎜 さらに、routing 時にログインをチェックする必要があります。 code> の変更。次のシナリオ (ルーティングの変更) では、ログイン ステータスを確認しないとエラーが発生する可能性があります。 🎜🎜ユーザーが<code>cookie/ローカルストレージを手動で削除し、操作を実行します。🎜🎜🎜🎜ユーザーがログインを必要とするルートをログインせずに手動で入力します。 🎜🎜🎜 🎜ユーザーはログイン時にログインページのルートを入力します🎜🎜🎜🎜これらは、ルートを監視するのに十分な理由です。これを実装するには、 の <code>watch 関数を使用します。 vue: 🎜rrreee 🎜この時点で、一般プロセスのステップ 1 が完了しました。次に、ユーザーの個人情報を取得する方法を実装します。 🎜🎜ユーザー情報の取得🎜🎜 ログインに成功した後、通常、ニックネーム、アバター、レベルなどのユーザー情報をバックエンドから表示する必要があります。取得は非常に簡単で、http リクエストを送信して、ただし、一般に、この情報は多くのルートで使用されるため (たとえば、uid は通常、各バックエンド インターフェイスでパラメーターとして保持される必要があります)、グローバル状態 (vuex) に保存する必要があります。 ): 🎜rrreee🎜 もちろん、app.js に記述するか、store.js として別途記述して app.js (推奨): 🎜rrreee🎜ログインリクエストを送信するためのチェックサムを入力してください🎜🎜予期しない文字や頻繁すぎるリクエストがバックグラウンドに送信されるのを防ぐために、フロントエンドはユーザーの入力を防止し、リクエストの繰り返しを防ぎます。もちろん、Web サイトごとに有効な文字は異なります。ここでは、が空の場合にのみ、不正な文字をチェックします。 🎜rrreee🎜 ここの this.toLogin は、ログイン要求メソッドです。 postパスワードはバックエンドに直接送信されません。通常、送信前にバックエンドによって設定されたルールに従って暗号化されます。この例では double が使用されます。 js/sha1.min.js を引用すると、大まかな実装は次のとおりです: 🎜rrreee🎜これでステップ 3、4、5 が完了します。最後のステップはログアウトです。 🎜🎜ログアウト🎜🎜 ログアウト時にバックエンドをリクエストする必要があるものと、そうでないものがあります。重要なのは、保存されたログイン ステータスを削除することです: 🎜rrreee🎜🎜

以上がVue.js は SPA ログイン ページの例を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか? 壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか? Mar 19, 2024 pm 02:00 PM

自分のコンピュータで他人の Steam アカウントにログインし、その他人のアカウントに壁紙ソフトウェアがインストールされている場合、自分のアカウントに切り替えた後、Steam は他人のアカウントに登録されている壁紙を自動的にダウンロードします。 Steam クラウドの同期をオフにします。別のアカウントにログインした後に、wallpaperengine が他の人の壁紙をダウンロードした場合の対処方法 1. 自分の steam アカウントにログインし、設定でクラウド同期を見つけて、steam クラウド同期をオフにします。 2. 以前にログインしたことのある他の人の Steam アカウントにログインし、壁紙クリエイティブ ワークショップを開き、サブスクリプション コンテンツを見つけて、すべてのサブスクリプションをキャンセルします。 (将来壁紙が見つからない場合は、まず壁紙を収集してからサブスクリプションをキャンセルできます) 3. 自分の Steam に戻ります。

小紅書で以前のアカウントにログインするにはどうすればよいですか?再接続後に元の番号が失われた場合はどうすればよいですか? 小紅書で以前のアカウントにログインするにはどうすればよいですか?再接続後に元の番号が失われた場合はどうすればよいですか? Mar 21, 2024 pm 09:41 PM

ソーシャル メディアの急速な発展に伴い、Xiaohongshu は多くの若者が生活を共有し、新製品を探索するための人気のプラットフォームになりました。使用中に、ユーザーが以前のアカウントにログインできない場合があります。この記事では、Xiaohongshuで古いアカウントにログインできない問題の解決方法と、バインドを変更した後に元のアカウントが失われる可能性への対処方法について詳しく説明します。 1. 小紅書の前のアカウントにログインするにはどうすればよいですか? 1. パスワードを取得してログインします。Xiaohongshu に長期間ログインしない場合、アカウントがシステムによってリサイクルされる可能性があります。アクセス権を復元するには、パスワードを取得してアカウントへのログインを再試行します。操作手順は以下の通りです。 (1) 小紅書アプリまたは公式サイトを開き、「ログイン」ボタンをクリックします。 (2) 「パスワードを取得」を選択します。 (3) アカウント登録時に使用した携帯電話番号を入力してください

バックグラウンドログインの問題の解決策を明らかにする バックグラウンドログインの問題の解決策を明らかにする Mar 03, 2024 am 08:57 AM

Discuz のバックグラウンド ログイン問題の解決策が明らかになりました。特定のコード サンプルが必要です。インターネットの急速な発展に伴い、Web サイトの構築がますます一般的になってきました。Discuz は、一般的に使用されるフォーラム Web サイト構築システムとして、次のユーザーに好まれています。多くのウェブマスター。しかし、その強力な機能ゆえに、Discuz を使用する際にバックグラウンドでのログインの問題などの問題が発生することがあります。本日は、Discuz のバックグラウンド ログインの問題の解決策を明らかにし、具体的なコード例を提供します。

Kuaishou PC 版へのログイン方法 - Kuaishou PC 版へのログイン方法 Kuaishou PC 版へのログイン方法 - Kuaishou PC 版へのログイン方法 Mar 04, 2024 pm 03:30 PM

最近、何人かの友人が Kuaishou コンピュータ版へのログイン方法を尋ねてきました。ここでは Kuaishou コンピュータ版へのログイン方法を説明します。必要な友人が来て、さらに詳しく学ぶことができます。ステップ 1: まず、コンピュータのブラウザで Baidu の Kuaishou 公式 Web サイトを検索します。ステップ 2: 検索結果リストの最初の項目を選択します。ステップ 3: Kuaishou 公式ウェブサイトのメインページに入った後、ビデオオプションをクリックします。ステップ 4: 右上隅にあるユーザーのアバターをクリックします。ステップ 5: QR コードをクリックして、ポップアップ ログイン メニューでログインします。ステップ 6: 次に、携​​帯電話で Kuaishou を開き、左上隅のアイコンをクリックします。ステップ 7: QR コードのロゴをクリックします。ステップ 8: My QR コード インターフェイスの右上隅にあるスキャン アイコンをクリックした後、コンピューター上の QR コードをスキャンします。ステップ 9: 最後に、Kuaishou のコンピュータ版にログインします。

Quarkで2つのデバイスにログインする方法 Quarkで2つのデバイスにログインする方法 Feb 23, 2024 pm 10:55 PM

Quark を使用して 2 つのデバイスにログインするにはどうすればよいですか? Quark Browser は 2 つのデバイスへの同時ログインをサポートしていますが、ほとんどの友人は Quark Browser を使用して 2 つのデバイスにログインする方法を知りません。次に、エディターがユーザー Quark にログインさせます。メソッド グラフィック チュートリアル、興味のあるユーザーはぜひ見に来てください。 Quark Browserの使い方チュートリアル Quark 2台のデバイスにログインする方法 1. まずQuark Browser APPを開き、メインページで[Quark Network Disk]をクリックします; 2. 次に、Quark Network Diskインターフェイスに入り、[My Backup]サービス機能を選択します; 3. 最後に、[デバイスの切り替え]を選択して、2 台の新しいデバイスにログインします。

小紅書がアカウントしか覚えていない場合、ログインするにはどうすればよいですか?アカウントを取得する方法を覚えていますか? 小紅書がアカウントしか覚えていない場合、ログインするにはどうすればよいですか?アカウントを取得する方法を覚えていますか? Mar 23, 2024 pm 05:31 PM

小紅書は現在、多くの人々の日常生活に溶け込んでおり、その豊富なコンテンツと便利な操作方法でユーザーは楽しんでいます。アカウントのパスワードを忘れてしまうこともありますが、アカウントだけは覚えているのにログインできないのはとても困ります。 1. Xiaohonshu がアカウントしか覚えていない場合、ログインするにはどうすればよいですか?パスワードを忘れた場合は、携帯電話の確認コードを使用して小紅書にログインできます。具体的な操作は次のとおりです: 1. 小紅書アプリまたはウェブ版の小紅書を開きます; 2. 「ログイン」ボタンをクリックし、「アカウントとパスワードでログイン」を選択します; 3. 「パスワードをお忘れですか?」ボタンをクリックします; 4.アカウント番号を入力して「次へ」をクリックします; 5. システムから携帯電話に確認コードが送信されますので、確認コードを入力して「OK」をクリックします; 6. 新しいパスワードを設定して確認します。サードパーティのアカウント (次のような) を使用することもできます。

Google Chrome でアカウントにログインできない場合はどうすればよいですか? Google Chromeアカウントにログインできない原因の解決策 Google Chrome でアカウントにログインできない場合はどうすればよいですか? Google Chromeアカウントにログインできない原因の解決策 Mar 13, 2024 pm 02:10 PM

Google Chrome でアカウントにログインできない場合はどうすればよいですか?多くのユーザーがこのソフトウェアを使用する場合、一部の機能はユーザーが Google アカウントにログインして使用する必要がありますが、何度試してもログインできず、多くのユーザーはこの問題に直面し、その方法がわかりません。今日のソフトウェア チュートリアルの内容が皆様のお役に立てれば幸いです。解決策は次のとおりです。 1. デスクトップ上のブラウザをクリックし、開くと、次のようなものが表示されます。 2. この時点でログイン画面が表示された場合はクリックし、表示されない場合は右上隅をクリックします。 3. 「ログイン」をクリックし、アカウント番号を入力します(@以降のアカウントは入力する必要はありません)。「次へ」をクリックします。 4. パスワードを入力し、このプロンプトが表示されたら、「有効にする」をクリックします。

115 Netdisk Web 版ログイン入口 115 Netdisk Web 版ログイン入口 Feb 23, 2024 pm 02:04 PM

115 Netdisk は多くのリソースを保存できるネットディスクですが、115 Netdisk Web バージョンのログイン入り口は何ですか? ユーザーは URL https://115.com を入力して Netdisk にアクセスする必要があり、ログイン後に使用できます。 。この機能の使用方法については、この 115 Netdisk Web バージョンのログイン最新の入り口の共有で説明していますので、ご覧ください。 115 Netdisk Web バージョンのログイン ポータル Web サイトの共有: https://115.com 詳細な紹介: 1. まず、Netdisk にログインする方法を選択する必要があります。 2. 右上隅にアップロードされたファイルが表示されます。 3. ここで新しいフォルダーを作成し、異なるモードに切り替えることができます。 4. ファイルにさまざまなタグを追加できます。 5. ユーザーのプライベートメッセージはウェブサイト上で見ることができます。

See all articles