Vue implementiert Login-Sprung

<Vorlage>
    <div Klasse="Login-Container">
        <el-form :model="ruleForm2" :rules="Regeln2"
         Statussymbol
         ref="regelForm2" 
         Beschriftungsposition = "links" 
         Beschriftungsbreite = "0px" 
         Klasse="Demo-RuleForm-Anmeldeseite">
            <h3 class="title">Login-Plattform</h3>
            <el-form-item prop="Benutzername">
                <el-input Typ="Text" 
                    v-model="ruleForm2.Benutzername" 
                    Auto-Vervollständigung="aus" 
                    Platzhalter="Benutzername"></el-input>
            </el-form-item>
            <el-form-item prop="Passwort">
                <el-input type="Passwort" 
                    v-model="regelForm2.passwort" 
                    Auto-Vervollständigung="aus" 
                    Platzhalter="Passwort"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">Anmelden</el-button>
            </el-form-item>
            <el-form-item>
                <el-Kontrollkästchen 
                    v-model="geprüft"
                    class="rememberme">Passwort merken</el-checkbox>
                <el-button type="text" @click="forgetpassword">Passwort vergessen</el-button>
            </el-form-item>
            
        </el-form>
    </div>

</Vorlage>

<Skript>
  importiere { requestLogin } von '../api/api';
  Standard exportieren {
    Daten() {
      zurückkehren {
        Anmeldung: falsch,
        RegelForm2: {
        },
        Regeln2: {
          Konto: [
            { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihre Kontonummer ein‘, Auslöser: ‚unscharf‘ },
          ],
          checkPass: [
            { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Passwort ein‘, Auslöser: ‚unscharf‘ },
          ]
        },
        geprüft: true
      };
    },
    Methoden: {
      handleReset2() {
        dies.$refs.ruleForm2.resetFields();
      },
      handleSubmit(ev) {
        dies.$refs.ruleForm2.validate((gültig) => {
          if (gültig) {
            dies.logining = wahr;
            var loginParams = { Benutzername: this.ruleForm2.username, Passwort: this.ruleForm2.password, Identifizierungscode: this.ruleForm2.identifycode };
            AnfrageLogin(loginParams).then(data => {
              dies.logining = falsch;
              let { msg, code, user } = Daten;
              wenn (Code !== 200) {
                diese.$nachricht({
                  Nachricht: msg,
                  Typ: "Fehler"
                });
              } anders {
                wenn (Benutzer.Typ === "Administrator"){
                    sessionStorage.setItem('Benutzer', JSON.stringify(Benutzer));
                    dies.$router.push({ Pfad: '/homepage' });
                } sonst wenn (Benutzer.Typ === "Anzeige") {
                    sessionStorage.setItem('Benutzer', JSON.stringify(Benutzer));
                    dies.$router.push({ Pfad: '/table' });
                }
              }
            });
          } anders {
            console.log('Fehler beim Senden!!');
            gibt false zurück;
          }
        });
      },
      Passwort vergessen(){
          this.$alert('Bitte kontaktieren Sie den Administrator, um Ihr Passwort abzurufen, Administrator-Telefonnummer: 131xxxxxxxx', 'Prompt', {
          confirmButtonText: 'Bestätigen',
          Typ: "Warnung"
        })
      }
    }
  }
</Skript>

<Stilbereich>
    label.el-checkbox.merke dich an mich {
        Rand: 0px 0px 15px;
        Textausrichtung: links;
    }
    label.el-button.vergessen {
        Rand: 0;
        Polsterung: 0;
        Rand: 1px durchgehend transparent;
        Gliederung: keine;
    }
</Stil>

<Vorlage>
    <el-row Klasse="Container">
        <el-col :span="24" class="header">
   <el-col :span="18" Klasse="Logo" >
                {{sysName}}
   </el-col>
   <el-col :span="4" class="Benutzerinfo">
    <el-dropdown trigger="schweben">
     <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
     <el-dropdown-menu slot="Dropdown">
      <el-dropdown-item>Meine Nachricht</el-dropdown-item>
      <el-dropdown-item>Einstellungen</el-dropdown-item>
      <el-dropdown-item @click.native="logout">Abmelden</el-dropdown-item>
     </el-Dropdown-Menü>
    </el-dropdown>
   </el-col>
  </el-col>
        <el-col :span="24" Klasse="main">
            <beiseite>
                <el-menu :default-active="$route.path" Klasse="el-menu el-menu-vertical-demo" @select="handleselect"
                        einzigartig geöffneter Router >
                        <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
      <el-submenu :index="index+''" v-if="!item.leaf">
       <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
       <el-menu-item v-for="Kind in Element.Kinder" :index="Kind.Pfad" :key="Kind.Pfad" v-if="!Kind.hidden">{{Kind.name}}</el-menu-item>
      </el-Untermenü>
      <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
     </Vorlage>
                </el-Menü>
            </aside>
   <Abschnitt Klasse="Inhaltscontainer">
    <div Klasse="Rasterinhalt bg-lila-hell">
     <el-col :span="24" class="breadcrumb-container">
      {{$route.name}}
     </el-col>
     <el-col :span="24" class="content-wrapper">
      <Übergangsname="Ausblenden" Modus="Aus-Ein">
       <Router-Ansicht></Router-Ansicht>
      </Übergang>
     </el-col>
    </div>
   </Abschnitt>
  </el-col>
    </el-row>
</Vorlage>

<Skript>
Standard exportieren {
    Daten() {
   zurückkehren {
    sysName:'xxx Verwaltungsplattform',
    sysUserName: '',
    sysUserAvatar: '',
    bilden: {
     Name: '',
     Region: '',
     Datum1: '',
     Datum2: '',
     Lieferung: falsch,
     Typ: [],
     Ressource: '',
     Beschreibung: ''
    }
   }
        },
    Methoden: {
   //Abmelden: function () {
    var _this = dies;
    this.$confirm('Beenden bestätigen?', 'Eingabeaufforderung', {
     //Typ: 'Warnung'
    }).then(() => {
     sessionStorage.removeItem('Benutzer');
     _this.$router.push('/login');
    }).catch(() => {

    });
   }
  },
    montiert() {
   var Benutzer = sessionStorage.getItem('Benutzer');
   if (Benutzer) {
    Benutzer = JSON.parse(Benutzer);
    this.sysUserName = Benutzername || '';
    this.sysUserAvatar = Benutzer.Avatar || '';
   }

  }
}
</Skript>

<style scoped lang="scss">
@import '../style/vars.scss';

    .container {
  Position: absolut;
  oben: 0px;
  unten: 0px;
  Breite: 100 %;
    }
    .header {
   Höhe: 60px;
            Zeilenhöhe: 60px;
   Hintergrund: $color-primary;
   Farbe: #fff;
   .Benutzerinfo {
    Textausrichtung: rechts;
    Polsterung rechts: 35px;
    schweben: rechts;
    .userinfo-inner {
     Cursor: Zeiger;
     Farbe: #fff;
     img {
      Breite: 40px;
      Höhe: 40px;
      Rahmenradius: 20px;
      Rand: 10px 0px 10px 10px;
      schweben: rechts;
     }
    }
   }
   .logo {
    Höhe: 60px;
    Schriftgröße: 22px;
    Polsterung links: 20px;
    img {
     Breite: 40px;
     schweben: links;
     Rand: 10px 10px 10px 0px;
    }
    .txt {
                    Farbe: #fff;
    }
   }
   .logo-width{
    Breite: 230px;
   }
   .logo-collapse-width{
    Breite: 60px
   }
   .Titel{
                Schriftgröße: 22px;
    Polsterung links: 20px;
    Zeilenhöhe: 60px;
    Farbe: #fff;
   }
        }
    .hauptsächlich {
   Anzeige: Flex;
   Position: absolut;
   oben: 60px;
   unten: 0px;
   Überlauf: versteckt;
   beiseite
    flexibel:0 0 230px;
    Breite: 230px;
    .el-menu{
                    Höhe: 100%;
                    /* Breite: 34 %; */
    }
   }
   .Inhaltscontainer {
    biegen: 1;
    /* Überlauf-y: scrollen; */
    Polsterung: 20px;
    .Breadcrumb-Container {
     .Titel {
      Breite: 200px;
      schweben: links;
      Farbe: #475669;
     }
     .breadcrumb-inner {
      schweben: rechts;
     }
    }
    .Inhaltswrapper {
     Hintergrundfarbe: #fff;
     Box-Größe: Rahmenbox;
    }
   }
  }
</Stil>

<Vorlage>
   <p>Startseite</p>
</Vorlage>

Login aus „./views/Login.vue“ importieren
Home aus „./views/Home.vue“ importieren
Homepage aus „./views/list/homepage.vue“ importieren 
Tabelle aus „./views/list/Table.vue“ importieren

let Routen = [
    {
        Pfad: '/login',
        Komponente: Login,
        Name: '',
        versteckt: wahr
    },
    {
        Weg: '/',
        Komponente: Home,
        Name: '',
        leaf: true, //Nur ein Knoten iconCls: 'el-icon-menu', //Symbolstilklasse
        Kinder: [
            { Pfad: '/homepage', Komponente: Homepage, Name: 'Homepage' },
        ]
    },
    {
        Weg: '/',
        Komponente: Home,
        Name: 'Menü',
        // leaf: true, // nur ein Knoten iconCls: 'el-icon-message', // Icon-Stilklasse
        Kinder: [
            { Pfad: '/Tabelle', Komponente: Tabelle, Name: 'Untermenü 01' }
        ]
    }
];

Standardrouten exportieren;

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
VueRouter von „vue-router“ importieren
Routen aus „./routes“ importieren
Vuex von „vuex“ importieren
Store aus „./vuex/store“ importieren
importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'
importiere Mock aus „./mock“
Mock.bootstrap();
importiere './style/login.css'

/* Vue.use(VueAxios, axios) */
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.Verwenden(Vuex)
Vue.config.productionTip = falsch

const router = neuer VueRouter({
  Routen
})

router.beforeEach((bis, von, weiter) => {
  //NProgress.start();
  wenn (zu.Pfad == '/login') {
    sessionStorage.removeItem('Benutzer');
  }
  let Benutzer = JSON.parse(sessionStorage.getItem('Benutzer'));
  wenn (!Benutzer && zu.Pfad != '/login') {
    weiter({ Pfad: '/login' })
  } anders {
    nächste()
  }
})

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')