シングルサインオン制御を実装するための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;
}
</スタイル>

<テンプレート>
  <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;
}
</スタイル>