シングルサインオン制御を実装するための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 をよろしくお願いいたします。

以下もご興味があるかもしれません: