シングルサインオン制御を実装するためのVueの完全なコード

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いです。具体的な原則については、前回の記事を参照してください。

Vue でシングル サインオンを実装する方法は N 通りあります。ここでは 2 つのシステムがあります。1 つはログイン システムのメイン エンドです。すべてのサブシステムまたは関連システムのログイン プロセスはここで完了します。

具体的なコードは次のとおりです: login.vue

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <button @click="handleLogin">クリックしてログイン</button>
    <button @click="rethome">前のページに戻る</button>
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
エクスポートデフォルト{
  名前: 'ホーム',
  データ () {
    戻る {
      メッセージ: 'システム 1: 統合ログイン ページ',
    }
  },
  マウントされた(){
    const トークン = Cookies.get('app.token');
    if(トークン){
      this.rethome();
    }
  },
  メソッド: {
        ハンドルログイン() {
        var トークン = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/',domain: '.xxx,com' }) //ウェブサイトのメインドメイン名を記入します if(Cookies.get('app.returl')){
          Cookies.set('app.loginname','System 2', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入}else{
          Cookies.set('app.loginname','System 1', { expires: 1000, path: '/',domain: '.xxx,com' }) // ウェブサイトのメインドメイン名を記入します}
        this.rethome();
    },
    戻る(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open(returl,"_parent");
        }それ以外{
          this.$router.push("/");
        }
    },
    ランダム文字列(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = tの長さ、
        n = "";
        (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        戻るn
    }
    }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

ホーム.vue

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <h3>ユーザー情報: {{token}}</h3>
    <h3>ログイン場所: {{loginname}}</h3>
    <button @click="logout">ログアウト</button>
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
 
エクスポートデフォルト{
  名前: 'ホーム',
  データ () {
    戻る {
      メッセージ: 'システム 1 メイン ページ'、
      トークン:''、
      ログイン名:''
    }
  },
  マウントされた(){
    const トークン = Cookies.get('app.token');
    this.token = トークン;
    const loginname = Cookies.get('app.loginname');
    this.ログイン名 = ログイン名;
    console.log(トークン);
    if(!トークン){
      this.$router.push("/login");
    }それ以外{
      this.rehome()
    }
  },
  メソッド: {
    ログアウト(){
        Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入します。Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入します。this.$router.go(0)
    },
    戻る(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open(returl,"_parent");
        }それ以外{
        }
    },
  }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

システムにログインしたら、手順の半分は完了です。次のステップは、コンポーネントを作成し、呼び出し側でメソッドを呼び出すことです。ここでは、ケース制御コードを紹介します。

<テンプレート>
  <div class="hello" v-show="false">
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
エクスポートデフォルト{
  小道具:{
        タイプ:{
            タイプ:文字列、
            デフォルト:'getdata'
    }
  },
  名前: 'ホーム',
  データ () {
    戻る {
      トークン:''、
      ログイン名:''
    }
  },
  マウントされた(){
    const トークン = Cookies.get('app.token');
    this.token = token?token:'ログインしていません';
    const loginname = Cookies.get('app.loginname');
    this.loginname = loginname?loginname:'ログインしていません';
    この関数は、
  },
  メソッド: {
        戻り値Fun(){
      varデータ = {
        トークン:this.token,
        ログイン名:this.ログイン名
      }
      this.$emit("clickFun",データ);
    }
  },
  時計:
      'type': 関数 (値) {
        const トークン = Cookies.get('app.token');
        this.token = token?token:'ログインしていません';
        const loginname = Cookies.get('app.loginname');
        this.loginname = loginname?loginname:'ログインしていません';
        スイッチ(val){
          ケース 'ログイン':
          console.log(トークン);
          if(トークン != ''){
            このメソッドは、
          }それ以外{
            Cookies.set('app.returl','Local route', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open('ログイン システム アドレス',"_parent");
          }
          壊す;
          'ログアウト'の場合:
          Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を記述します Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を記述します。
          this.token = 'ログインしていません';
          this.loginname = 'ログインしていません';
          このメソッドは、
          壊す;
          ケース 'getdata':
          このメソッドは、
          壊す;
        }
      }
  }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

呼び出しコードの例は次のとおりです。

<テンプレート>
  <div class="hello">
    <ログイン @clickFun="returnFun" :type ="type"></ログイン>
    <h1>{{ メッセージ }}</h1>
    <h3>ユーザー情報: {{token}}</h3>
    <h3>ログイン場所: {{loginname}}</h3>
    <button @click="login">ログイン</button>
    <button @click="logout">ログアウト</button>
  </div>
</テンプレート>
 
<スクリプト>
'js-cookie' から Cookies をインポートします
'@/pages/login' からログインをインポートします
 
エクスポートデフォルト{
  名前: 'ホーム',
  データ () {
    戻る {
      メッセージ: 'システム 2: 親コンポーネント ページ',
      トークン:'ログインしていません',
      loginname:'ログインしていません',
      タイプ: 'getdata',
    }
  },
  マウントされた(){
  },
  メソッド: {
    ログイン(){
      this.type = "ログイン";
    },
    ログアウト(){
      this.type = "ログアウト";
    },
    returnFun(値){
        console.log(値、サブコンポーネントの戻り値)
                定数トークン = 値.トークン;
        this.token = token?token:'ログインしていません';
        const ログイン名 = 値. ログイン名;
        this.loginname = loginname?loginname:'ログインしていません';
        }
  },
  コンポーネント:{
            ログイン
    }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
h1、h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

この時点で、シンプルなシングル サインオン システムの構築が完了しました。このアイデアに従って改善を続け、最終的に対応する制御を行うことができます。もし役に立つなら、ぜひフォローしてください。一緒に議論し、学び、一緒に進歩できるように、技術ドキュメントを定期的に更新します。

Vue シングル サインオン制御コードの共有に関するこの記事はこれで終わりです。Vue シングル サインオンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでシングルサインオンを実装する方法のまとめ
  • SpringBoot+Vue+Redis はシングルサインオン (ある場所でログインし、別の場所でログアウトする) を実装します。
  • Springboot と Vue を組み合わせて SSO シングル サインオンを実装する
  • Vue+springboot フロントエンドとバックエンドの分離により、シングルサインオンのクロスドメイン問題解決を実現

<<:  ユーザーのニーズがマーケティング指向のデザインにつながる

>>:  Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法

推薦する

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

固定サイドバーを実現するためのJavaScript

固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...

Google Chromeの自動入力問題に対する完璧な解決策

Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...

Javascript 文字列メソッドの詳細な説明

目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...

Linux/Mac MySQL パスワードを忘れた場合の対処方法

Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...

Vue でキープアライブを使用した後にキャッシュをクリアする方法

キープアライブとは何ですか?通常の開発では、コンポーネントによっては複数回初期化する必要のないものも...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

HTMLフォーム入力監視の詳細な理解

今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...

MySQLテーブルにタイムスタンプを追加するいくつかの方法

シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...

MySQL における悲観的ロックと楽観的ロック

リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...