Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">Klicken, um sich anzumelden</button>
    <button @click="rethome">Zur vorherigen Seite zurückkehren</button>
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
Standard exportieren {
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      msg: 'System 1: einheitliche Anmeldeseite',
    }
  },
  montiert(){
    const token = Cookies.get('app.token');
    wenn(Token){
      dies.rethome();
    }
  },
  Methoden: {
        handleLogin() {
        var token = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/',domain: '.xxx,com' }) //Schreiben Sie den Hauptdomänennamen Ihrer Website if(Cookies.get('app.returl')){
          Cookies.set('app.loginname','System 2', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website}else{
          Cookies.set('app.loginname','System 1', { expires: 1000, path: '/',domain: '.xxx,com' }) //Schreiben Sie den Hauptdomänennamen Ihrer Website}
        dies.rethome();
    },
    zurückkehren(){
      var returl = Cookies.get('app.returl');
        wenn(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website window.open(returl,"_parent");
        }anders{
          dies.$router.push("/");
        }
    },
    Zufallszeichenfolge(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.Länge,
        n = "";
        für (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        Rückkehr Substantiv, maskulin—
    }
    }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
    <h3>Benutzerinformationen: {{token}}</h3>
    <h3>Anmeldeort: {{loginname}}</h3>
    <button @click="logout">Abmelden</button>
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
 
Standard exportieren {
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      msg: 'System 1 Hauptseite',
      Token:'',
      Anmeldename:''
    }
  },
  montiert(){
    const token = Cookies.get('app.token');
    dieses.token = token;
    const loginname = Cookies.get('app.loginname');
    this.loginname = Anmeldename;
    konsole.log(token);
    wenn(!token){
      dies.$router.push("/login");
    }anders{
      dies.rehome()
    }
  },
  Methoden: {
    Abmelden(){
        Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer WebsiteCookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Websitethis.$router.go(0)
    },
    zurückkehren(){
      var returl = Cookies.get('app.returl');
        wenn(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website window.open(returl,"_parent");
        }anders{
        }
    },
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>

<Vorlage>
  <div class="hallo" v-show="false">
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
Standard exportieren {
  Requisiten:{
        Typ:{
            Typ: Zeichenfolge,
            Standard: „Daten abrufen“
    }
  },
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      Token:'',
      Anmeldename:''
    }
  },
  montiert(){
    const token = Cookies.get('app.token');
    this.token = token?token:'Nicht angemeldet';
    const loginname = Cookies.get('app.loginname');
    this.loginname = loginname?loginname:'Nicht angemeldet';
    dies.returnFun()
  },
  Methoden: {
        RückkehrSpaß(){
      var Daten = {
        Token:dieses.Token,
        Anmeldename:dieser.Anmeldename
      }
      dies.$emit("clickFun",data);
    }
  },
  betrachten:
      'Typ': Funktion (Wert) {
        const token = Cookies.get('app.token');
        this.token = token?token:'Nicht angemeldet';
        const loginname = Cookies.get('app.loginname');
        this.loginname = loginname?loginname:'Nicht angemeldet';
        Schalter(Wert){
          Fall 'Anmelden':
          konsole.log(token);
          wenn(Token != ''){
            dies.returnFun();
          }anders{
            Cookies.set('app.returl','Lokale Route', { läuft ab: 1000, Pfad: '/',Domäne: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website window.open('Adresse des Anmeldesystems',"_parent");
          }
          brechen;
          Fall 'Abmelden':
          Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//Schreiben Sie den Hauptdomänennamen Ihrer Website;
          this.token = 'Nicht angemeldet';
          this.loginname = 'Nicht angemeldet';
          dies.returnFun();
          brechen;
          Fall 'getdata':
          dies.returnFun();
          brechen;
        }
      }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>

<Vorlage>
  <div Klasse="hallo">
    <login @clickFun="returnFun" :typ ="typ"></login>
    <h1>{{ msg }}</h1>
    <h3>Benutzerinformationen: {{token}}</h3>
    <h3>Anmeldeort: {{loginname}}</h3>
    <button @click="login">Anmelden</button>
    <button @click="logout">Abmelden</button>
  </div>
</Vorlage>
 
<Skript>
Cookies aus „js-cookie“ importieren
Login aus „@/pages/login“ importieren
 
Standard exportieren {
  Name: 'Heimat',
  Daten () {
    zurückkehren {
      msg: 'System 2: Übergeordnete Komponentenseite',
      token:'Nicht angemeldet',
      loginname:'Nicht angemeldet',
      Typ: 'Daten abrufen',
    }
  },
  montiert(){
  },
  Methoden: {
    Login(){
      dieser.Typ = "Anmelden";
    },
    Abmelden(){
      this.type = "Abmelden";
    },
    returnFun(Wert){
        console.log(Wert,"Rückgabewert der Unterkomponente")
                const token = Wert.Token;
        this.token = token?token:'Nicht angemeldet';
        const loginname = Wert.loginname;
        this.loginname = loginname?loginname:'Nicht angemeldet';
        }
  },
  Komponenten: {
            Login
    }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
h1, h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>