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

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'
  })
}

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

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

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

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

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
}

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
}

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', [])
      ...
    })
  }
}

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

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

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()
})

...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" />

<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>