Beispiel für die Implementierung des dynamischen Routings in der Vue-Admin-Vorlage

Beispiel für die Implementierung des dynamischen Routings in der Vue-Admin-Vorlage

Datenschnittstelle zum Bereitstellen der Anmeldung und zum Abrufen von Benutzerinformationen

In api/user.js

Importieren Sie die Anforderung von „@/utils/request“.
const Api = {
  Zum Mitnehmen: '/student/students/zum Mitnehmen/',
  LoginIn: '/student/students/loginIn/',
  StudentInfo:'/student/students/studentInfo/',
}
Exportfunktion login(Parameter) {
  Rückgabeanforderung({
    URL: Api.LoginIn,
    Methode: 'get',
    Parameter: Parameter
  })
}

Exportfunktion getInfo(Token) {
  Rückgabeanforderung({
    URL: Api.StudentInfo,
    Methode: 'get',
    Parameter: {'Token':Token}
  })
}

Exportfunktion Abmelden() {
  Rückgabeanforderung({
    URL: Api.TakeOut,
    Methode: 'get'
  })
}

Anmeldeschnittstellendaten

{'code': 200, 'data': {'token': 'X-admin'}, 'message': "Vorgang erfolgreich"}

Schnittstellendaten beenden

{'code': 200, 'data': 'success', 'message': "Vorgang erfolgreich"}

Detaillierte Schnittstellendaten

{
    "Code": 200,
    "Daten": {
        "Avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
        "Name": "Huang Xiaoguo",
        "Rollen": [
            "Editor"
        ]
    }
}

Router/index.js ändern

Vue von „vue“ importieren
Router von „vue-router“ importieren

Vue.use(Router)

/* Layout */
Layout aus '@/layout' importieren

// Grundlegendes Routing export const constantRoutes = [
  {
    Pfad: '/login',
    Komponente: () => import('@/views/login/index'),
    versteckt: wahr
  },

  {
    Pfad: '/404',
    Komponente: () => import('@/views/404'),
    versteckt: wahr
  },

  {
    Weg: '/',
    Komponente: Layout,
    Umleitung: '/dashboard',
    Kinder: [{
      Pfad: 'Dashboard',
      Name: 'Dashboard',
      Komponente: () => import('@/views/dashboard/index'),
      Meta: {Titel: „Startseite“, Symbol: „el-icon-menu“}
    }]
  },
]

/**
 * Dynamisches Routing */
exportiere const asyncRoutes = [
  {
    Pfad: '/studentinformation',
    Komponente: Layout,
    Kinder: [
      {
        Pfad: 'Index',
        Komponente: () => import('@/views/studentinformation/index'),
        meta: { title: 'Studenteninformationen', icon: 'el-icon-s-check' }
      }
    ]
  },
  {
    Pfad: '/Dozenteninformation',
    Komponente: Layout,
    Kinder: [
      {
        Pfad: 'Index',
        Komponente: () => import('@/views/lecturerinformation/index'),
        meta: { title: 'Informationen zum Dozenten', icon: 'el-icon-s-custom', roles: ['editor'] }
      }
    ]
  },
  {
    Pfad: '/coursemanage',
    Komponente: Layout,
    Meta: { Rollen: ['Administrator'] },
    Kinder: [
      {
        Pfad: 'Index',
        Komponente: () => import('@/views/coursemanage/index'),
        meta: { title: 'Kursverwaltung', icon: 'el-icon-s-platform'}
      }
    ]
  },
  // Die 404-Seite muss auf der letzten Seite platziert werden { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => neuer Router({
  // Modus: „Verlauf“, // Serviceunterstützung erforderlich
  scrollBehavior: () => ({ y: 0 }),
  Routen: konstanteRouten
})

const router = createRouter()

// Details siehe: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
Exportfunktion resetRouter() {
  const neuerRouter = createRouter()
  router.matcher = newRouter.matcher // Router zurücksetzen
}

Standardrouter exportieren

Schreiben Sie die dynamisch angezeigten Routen in asyncRoutes und fügen Sie Rollen hinzu, zum Beispiel meta: { roles: ['admin'] },

Fügen Sie permission.js im Verzeichnis store/modules hinzu

importiere { asyncRoutes, constantRoutes } von '@/router'

/**
 * Verwenden Sie meta.role, um festzustellen, ob der aktuelle Benutzer die Berechtigung hat
 * @param Rollen
 * @param Route
 */
Funktion hatBerechtigung(Rollen, Route) {
  wenn (route.meta && route.meta.roles) {
    returniere roles.some(Rolle => route.meta.roles.includes(Rolle))
  } anders {
    returniere wahr
  }
}

/**
 * Filtern Sie asynchrone Routingtabellen durch Rekursion
 * @param Routen asyncRoutes
 * @param Rollen
 */
Exportfunktion filterAsyncRoutes(Routen, Rollen) {
  const res = []

  Routen.fürJedes(Route => {
    const tmp = { ...route }
    wenn (hasPermission(Rollen, tmp)) {
      wenn (tmp.Kinder) {
        tmp.children = filterAsyncRoutes(tmp.children, Rollen)
      }
      res.push(tmp)
    }
  })

  Rückgabewert
}

konstanter Zustand = {
  Routen: [],
  Routes hinzufügen: []
}

const Mutationen = {
  SET_ROUTES: (Status, Routen) => {
    state.addRoutes = Routen
    Zustand.Routen = konstanteRouten.concat(Routen)
  }
}

const Aktionen = {
  Routes generieren({ commit }, Rollen) {
    gib ein neues Versprechen zurück (Auflösen => {
      const abgerufenRoutes = filterAsyncRoutes(asyncRoutes, Rollen)
      commit('SET_ROUTES', aufgerufene Routen)
      auflösen(Zugriffsrouten)
    })
  }
}

Standard exportieren {
  Namespace: wahr,
  Zustand,
  Mutationen,
  Aktionen
}

Ändern Sie store/modulds/user.js

importiere { login, logout, getInfo } von '@/api/user'
importiere { getToken, setToken, removeToken } aus '@/utils/auth'
importiere { resetRouter } von '@/router'

const getDefaultState = () => {
  zurückkehren {
    Token: getToken(),
    Name: '',
    Avatar: '',
    Rollen: []
  }
}

const state = getDefaultState()

const Mutationen = {
  RESET_STATE: (Status) => {
    Objekt.assign(Zustand, getDefaultState())
  },
  SET_TOKEN: (Status, Token) => {
    Status.Token = Token
  },
  SET_NAME: (Staat, Name) => {
    Staat.Name = Name
  },
  SET_AVATAR: (Status, Avatar) => {
    Zustand.avatar = Avatar
  },
  SET_ROLES: (Status, Rollen) => {
    state.roles = Rollen
  }
}

const Aktionen = {
  // Benutzeranmeldung
  login({ commit }, Benutzerinfo) {
    const { Benutzername, Passwort } = Benutzerinfo
    returniere neues Promise((lösen, ablehnen) => {
      login({ Benutzername: Benutzername.trim(), Passwort: Passwort }).then(response => {
        const { Daten } = Antwort
        commit('SET_TOKEN', Daten.Token)
        setToken(Daten.Token)
        lösen()
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Benutzerinformationen abrufen
  getInfo({ commit, status }) {
    returniere neues Promise((lösen, ablehnen) => {
      getInfo(Status.Token).then(Antwort => {
        const { Daten } = Antwort

        wenn (!data) {
          return reject('Die Überprüfung ist fehlgeschlagen, bitte melden Sie sich erneut an.')
        }

        const { Rollen, Name, Avatar } = Daten
        commit('SET_ROLES', Rollen)
        commit('SET_NAME', Name)
        commit('SET_AVATAR', Avatar)
        auflösen (Daten)
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Benutzerabmeldung
  Abmelden({ Commit, Status }) {
    returniere neues Promise((lösen, ablehnen) => {
      abmelden(Status.Token).dann(() => {
        removeToken() // muss zuerst das Token entfernen
        Router zurücksetzen()
        commit('ZURÜCKSETZEN_ZUSTAND')
        commit('ROLES_SETZEN', [])
        lösen()
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Token entfernen
  zurücksetzenToken({ commit }) {
    gib ein neues Versprechen zurück (Auflösen => {
      removeToken() // muss zuerst das Token entfernen
      commit('ZURÜCKSETZEN_ZUSTAND')
      commit('ROLES_SETZEN', [])
      lösen()
    })
  }
}

Standard exportieren {
  Namespace: wahr,
  Zustand,
  Mutationen,
  Aktionen
}

Rollen hinzufügen: [] Um die Berechtigungsliste zu speichern, fügen Sie den folgenden Inhalt hinzu

const getDefaultState = () => {
  zurückkehren {
    ...
    Rollen: []
  }
}

const Mutationen = {
  ...
  SET_ROLES: (Status, Rollen) => {
    state.roles = Rollen
  }
}

  // Benutzerinformationen abrufen
  getInfo({ commit, status }) {
    returniere neues Promise((lösen, ablehnen) => {
      getInfo(Status.Token).then(Antwort => {
        ...
        const { Rollen, Name, Avatar } = Daten
        commit('SET_ROLES', Rollen)
        ...
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Benutzerabmeldung
  Abmelden({ Commit, Status }) {
    returniere neues Promise((lösen, ablehnen) => {
      abmelden(Status.Token).dann(() => {
        ...
        commit('ROLES_SETZEN', [])
        ...
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Token entfernen
  zurücksetzenToken({ commit }) {
    gib ein neues Versprechen zurück (Auflösen => {
      ...
      commit('ROLES_SETZEN', [])
      ...
    })
  }
}

Rollen in store/getters.js hinzufügen

const getter = {
  Seitenleiste: Status => Status.App.Seitenleiste,
  Gerät: Status => Status.App.Gerät,
  Token: Status => Status.Benutzer.Token,
  Avatar: Status => Status.Benutzer.Avatar,
  Name: Staat => Staat.Benutzername,
  
  //Rollen hinzufügen
  Rollen: Status => Status.Benutzer.Rollen,
  //Dynamisches Routing permission_routes: state => state.permission.routes,
}
Standardgetter exportieren

Berechtigung für store/index.js hinzufügen

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren
App aus „./modules/app“ importieren
Einstellungen aus „./modules/settings“ importieren
Benutzer aus „./modules/user“ importieren

//Berechtigung hinzufügen
Importberechtigung aus „./modules/permission“

Vue.Verwenden(Vuex)

const store = neuer Vuex.Store({
  Module:
    App,
    Einstellungen,
    Benutzer,
    
 //Berechtigung hinzufügen
    Erlaubnis
  },
  Getter
})

Standardspeicher exportieren

Ändern Sie abschließend die Datei permission.js im Stammverzeichnis

importiere Router, {konstanteRouten} von './router'
Store aus „./store“ importieren
importiere { Nachricht } von 'element-ui'
importiere NProgress von 'nprogress' // Fortschrittsbalken
importiere 'nprogress/nprogress.css' // Fortschrittsbalken-Stil
importiere { getToken } von '@/utils/auth' // Token aus Cookie holen
importiere getPageTitle aus '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress-Konfiguration

const whiteList = ['/login'] // keine Weiterleitungs-Whitelist

router.beforeEach(async (zu, von, weiter) => {
  // Fortschrittsbalken starten
  NProgress.start()

  // Seitentitel festlegen
  Dokumenttitel = getPageTitle(zu.meta.title)

  // Feststellen, ob der Benutzer sich angemeldet hat
  const hasToken = getToken()

  wenn (hatToken) {
    wenn (zu.Pfad === '/login') {
      // wenn angemeldet, Weiterleitung zur Startseite
      weiter({ Pfad: '/' })
      NProgress.done()
    } anders {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      wenn (hatRollen) {
        nächste()
      } anders {
        versuchen {
          // Benutzerinformationen abrufen
          // Hinweis: Rollen müssen ein Objekt-Array sein, wie zum Beispiel: ['admin'] oder ['entwickler', 'editor']
          const { Rollen } = warte auf store.dispatch('Benutzer/getInfo')
          console.log(Rollen)
          // Karte zugänglicher Routen basierend auf Rollen erstellen
          const accessRoutes = warte auf store.dispatch('permission/generateRoutes', Rollen)
          // barrierefreie Routen dynamisch hinzufügen
          router.options.routes = constantRoutes.concat(Zugriffsrouten)
          router.addRoutes(Zugriffsrouten)
          
          // Hack-Methode, um sicherzustellen, dass addRoutes vollständig ist
          // setze „replace: true“, damit die Navigation keinen Verlaufsdatensatz hinterlässt
          weiter({ ...zu, ersetzen: true })
        } Fehler abfangen {
          // Token entfernen und zur Anmeldeseite gehen, um sich erneut anzumelden
          warte auf store.dispatch('user/resetToken')
          Message.error(Fehler || 'Hat einen Fehler')
          weiter(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } anders {
    /* hat kein Token*/

    wenn (whiteList.indexOf(to.path) !== -1) {
      // in der Whitelist für kostenlose Anmeldungen direkt
      nächste()
    } anders {
      // Andere Seiten ohne Zugriffsberechtigung werden auf die Anmeldeseite umgeleitet.
      weiter(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // Fortschrittsbalken beenden
  NProgress.done()
})

Daten an die Navigationsleiste binden

Im Layout/Komponenten/Seitenleiste/Index.vue

...mapGetters([
      // Dynamisches Routing fügt permission_routes hinzu
      "Berechtigungsrouten",
      'Seitenleiste'
    ]),

 <!-- Dynamisches Routing -->
 <sidebar-item v-for="Route in Berechtigungsrouten" :key="route.path" :item="Route" :base-path="route.path" />

Der vollständige Code lautet wie folgt:

<Vorlage>
  <div :class="{ 'hat-logo': Logo anzeigen }">
    <logo v-if="Logo anzeigen" :collapse="istCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-Menü
        :default-active="aktivesMenü"
        :collapse="istCollapse"
        :Hintergrundfarbe="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="falsch"
        Modus="vertikal"
      >
        <!-- <Seitenleistenelement
          v-for="Route in Routen"
          :Schlüssel="Route.Pfad"
          :item="Route"
          :base-path="route.pfad"
        /> -->
        <Seitenleistenelement
          v-for="Route in Berechtigungsrouten"
          :Schlüssel="Route.Pfad"
          :item="Route"
          :base-path="route.pfad"
        />
      </el-Menü>
    </el-scrollbar>
  </div>
</Vorlage>

<Skript>
importiere { mapGetters } von 'vuex'
Logo aus „./Logo“ importieren
SidebarItem aus './SidebarItem' importieren
Variablen aus „@/styles/variables.scss“ importieren

Standard exportieren {
  Komponenten: { SidebarItem, Logo },
  berechnet: {
    ...mapGetters([
      // Dynamisches Routing fügt permission_routes hinzu
      "Berechtigungsrouten",
      'Seitenleiste',
    ]),
    Routen() {
      gib dies zurück.$router.options.routes
    },
    aktivesMenü() {
      const route = dies.$route
      const { meta, Pfad } = Route
      // Wenn Sie einen Pfad festlegen, wird in der Seitenleiste der festgelegte Pfad hervorgehoben
      wenn (meta.activeMenu) {
        meta.activeMenu zurückgeben
      }
      Rückweg
    },
    zeigeLogo() {
      gib dies zurück.$store.state.settings.sidebarLogo
    },
    Variablen() {
      Rückgabevariablen
    },
    istCollapse() {
      gib !this.sidebar.opened zurück
    },
  },
}
</Skript>

Dies ist das Ende dieses Artikels über die Implementierung des dynamischen Routings von Vue-Admin-Templates. Weitere Informationen zur Implementierung des dynamischen Routings von Vue-Admin-Templates finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • vue-admin-template konfiguriert den Schnellnavigationscode (Tab-Navigationsleiste)
  • Detaillierte Erklärung des Optimierungsprozesses mithilfe des vue-admin-template
  • Implementierung des Hinzufügens von Tagsview zur Vorlage „vue-admin-template“

<<:  So passen Sie die Höhe eines Divs an die Höhe des Browsers an

>>:  15 Best Practices für HTML-Anfänger

Artikel empfehlen

JS implementiert das Baidu-Suchfeld

In diesem Artikelbeispiel wird der spezifische JS...

Einführung in das Versionsverwaltungstool Rational ClearCase

Rational ClearCase ist ein Tool für das Softwarek...

Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

1. Proto kompilieren Erstellen Sie einen neuen Pr...

So öffnen Sie den Port in Centos7

Die Standard-Firewall von CentOS7 ist nicht iptab...

Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6

Einige Befehlsunterschiede zwischen den Versionen...

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Einführung von zwei Methoden zum Anzeigen von MyS...

Eine kurze Diskussion über die Rolle leerer HTML-Links

Leerer Link: Das heißt, es besteht keine Verbindu...

Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

Inhaltsverzeichnis Vorbereitende Vorbereitung Ber...

Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS

Über JS, CSS CSS: Stylesheet oben Vermeiden Sie C...

Mycli ist ein unverzichtbares Tool für MySQL-Befehlszeilen-Enthusiasten

mycli MyCLI ist eine Befehlszeilenschnittstelle f...

JavaScript-Komposition und Vererbung erklärt

Inhaltsverzeichnis 1. Einleitung 2. Vererbung der...