Vue-Router-Beispielcode zum dynamischen Generieren von Navigationsmenüs basierend auf Backend-Berechtigungen

router.beforeResolve(async (zu, von, weiter) => {
  let hasToken = store.getters['Benutzer/Zugriffstoken']
  wenn (!settings.loginInterception) hasToken = true
  wenn (hatToken) {
    wenn (zu.Pfad === '/auth/sign-in') {
      weiter({ Pfad: '/' })
    } anders {
      const hatBerechtigungen =
        store.getters['Benutzer/Berechtigungen'] &&
        store.getters['Benutzer/Berechtigungen'].length > 0
      wenn (hatBerechtigungen) {
        nächste()
      } anders {
        versuchen {
          Berechtigungen lassen
          wenn (!constant.loginInterception) {
            // settings.js Wenn loginInterception false ist, virtuelle Berechtigungen erstellen, warten Sie auf store.dispatch('User/setPermissions', ['admin'])
            Berechtigungen = ['Administrator']
          } anders {
            Berechtigungen = warte auf store.dispatch('User/getUserInfo')
          }
          let accessRoutes = []
          accessRoutes = warte auf store.dispatch('Routes/setRoutes', Berechtigungen)
          // Routen hinzufügen router.addRoutes(accessRoutes)
          weiter({ ...zu, ersetzen: true })
        } fangen {
          warte auf store.dispatch('Benutzer/Zugriffstoken zurücksetzen')
        }
      }
    }
  } anders {
    wenn (settings.routesWhiteList.indexOf(to.path) !== -1) {
      nächste()
    } anders {
      weiter('/auth/anmelden')
    }
  }
  Dokumenttitel = getPageTitle(zu.meta.title)
})

Standard exportieren {
  // Ob Login-Interception aktiviert werden soll loginInterception: true,
  // Routen, die die Token-Verifizierung nicht bestehen routesWhiteList: ['/auth/sign-in', '/auth/register', '/401', '/404'],
}

/**
 * @Autor Alan
 * @description Routing-Abfangstatusverwaltung*/
importiere { asyncRoutes, constantRoutes } von '@/router'
importiere { filterAsyncRoutes } von '@/Utils/handleRoutes'

const state = () => ({
  Routen: [],
  Teilrouten: []
})
const getter = {
  Routen: (Bundesstaat) => Bundesstaat.Routen,
  partielleRouten: (Staat) => Staat.partielleRouten
}
const Mutationen = {
  setRoutes (Staat, Routen) {
    Zustand.Routen = konstanteRouten.concat(Routen)
  },

  setPartialRoutes (Status, Routen) {
    Zustand.partielleRouten = konstanteRouten.concat(Routen)
  }
}
const Aktionen = {
  async setRoutes ({ commit }, Berechtigungen) {
    const finallyAsyncRoutes = warte auf filterAsyncRoutes(
      [...asynchroneRouten],
      Berechtigungen
    )
    commit('setRoutes', schließlichAsyncRoutes)
    returniere finallyAsyncRoutes
  },
  setPartialRoutes ({ commit }, accessRoutes) {
    commit('partielleRouten festlegen', Zugriffsrouten)
    zurück zu den Zugangsrouten
  }
}
export default { namespaced: true, Status, Getter, Mutationen, Aktionen }

/**
 * @Autor Alan
 * @description Bestimmen Sie, ob die aktuelle Route Berechtigungen enthält * @param Berechtigungen
 * @param Route
 * @returns {boolean|*}
 */
Exportfunktion hasPermission (Berechtigungen, Route) {
  wenn (route.meta && route.meta.permissions) {
    returniere Berechtigungen.some((Rolle) => route.meta.permissions.includes(Rolle))
  } anders {
    returniere wahr
  }
}

/**
 * @Autor Alan
 * @description Routen basierend auf dem Berechtigungsarray abfangen * @param Routen
 * @param-Berechtigungen
 * @returns {[]}
 */
Exportfunktion filterAsyncRoutes (Routen, Berechtigungen) {
  const finallyRoutes = []
  Routen.fürJeden((Route) => {
    const item = { ...route }
    if (hasPermission(Berechtigungen, Element)) {
      wenn (Element.Kinder) {
        item.children = filterAsyncRoutes(item.children, Berechtigungen)
      }
      finallyRoutes.push(Element)
    }
  })
  return finallyRoutes
}

/*
* @Autor Alan
* @description Öffentliches Routing */
exportiere const konstanteRouten = [
  {
    Pfad: '/auth',
    Name: 'auth1',
    Komponente: AuthLayout,
    untergeordnete Elemente: authChildRoutes('auth1'),
    hidden: true // Menü ausblenden},
  {
    Weg: '/',
    Name: "Dashboard",
    Komponente: VerticleLayout,
    Meta: {
      Titel: 'Dashboard',
      Name: „sidebar.dashboard“,
      is_heading: falsch,
      is_active: falsch,
      Link: '',
      Klassenname: '',
      is_icon_class: wahr,
      Symbol: „ri-home-4-line“,
      Berechtigungen: ['admin']
    },
    untergeordnete Elemente: childRoutes('dashboard')
  }
]

/*
* @Autor Alan
* @description Asynchrones Routing */
exportiere const asyncRoutes = [
  {
    Pfad: '/menu-design',
    Name: 'horizontales Dashboard',
    Komponente: HorizantalLayout,
    Meta: {
      Titel: 'Menügestaltung',
      Name: 'sidebar.MenüDesign',
      is_heading: falsch,
      is_active: falsch,
      Link: '',
      Klassenname: '',
      is_icon_class: wahr,
      Symbol: „ri-menu-3-line“,
      Berechtigungen: ['admin']
    },
    untergeordnete Elemente: horizontaleRoute('Dashboard')
  }, {
    Pfad: '/core',
    Name: "Kern",
    Komponente: VerticleLayout,
    Meta: {
      Titel: „UI-Elemente“,
      Name: 'sidebar.uiElements',
      is_heading: falsch,
      is_active: falsch,
      Klassenname: '',
      Link: '',
      is_icon_class: wahr,
      Symbol: „ri-Bleistift-Lineal-Linie“,
      Berechtigungen: ['admin']
    },
    Kinder: coreChildRoute('core')
  }
]

<Vorlage>
  <b-collapse tag="ul" :class="Klassenname" :visible="öffnen" :id="ID-Name" :accordion="AccordianName">
    <li v-for="(Artikel, Index) in Artikeln" :key="index" :class=" !hideListMenuTitle? 'p-0' : Artikel.meta.is_heading ? 'iq-menu-title' :activeLink(Artikel) && Artikel.Kinder ? 'aktiv' : activeLink(Artikel) ? 'aktiv' : ''">
      <template v-if="!item.hidden">
        <i v-if="item.meta.is_heading && hideListMenuTitle" Klasse="ri-subtract-line" />
        <span v-if="item.meta.is_heading && hideListMenuTitle">{{ $t(item.meta.name) }}</span>
        <router-link :to="item.meta.link" v-if="!item.is_heading" :class="`iq-waves-effect ${activeLink(item) && item.children ? 'active' : activeLink(item) ? 'active' : ''}`" vb-toggle="item.meta.name">
          <i :class="item.meta.icon" v-if="item.meta.ist_icon_klasse"/>
          <Vorlage v-else v-html="item.meta.icon">
          </Vorlage>
          <span>{{ $t(item.meta.name) }}</span>
          <i v-if="Artikel.Kinder" Klasse="ri-Pfeil-rechts-s-Linie iq-Pfeil-rechts" />
          <small v-html="item.meta.append" v-if="hideListMenuTitle" :class="item.meta.append_class" />
        </Router-Link>
        <Liste v-if="item.children" :items="item.children" :sidebarGroupTitle="hideListMenuTitle" :open="item.meta.link.name !== '' && activeLink(item) && item.children ? true : !!(item.meta.link.name !== '' && activeLink(item))" :idName="item.meta.name" :accordianName="`sidebar-accordion-${item.meta.class_name}`" :className="`iq-submenu ${item.meta.class_name}`" />
      </Vorlage>
    </li>
  </b-collapse>
</Vorlage>
<Skript>
Liste importieren aus './CollapseMenu' // Selbstkomponente importieren { core } aus '../../../config/pluginInit'
Standard exportieren {
  Namensliste',
  Requisiten: {
    Elemente: Array,
    Klassenname: { Typ: String, Standard: 'iq-menu' },
    öffnen: { Typ: Boolean, Standard: false },
    idName: { Typ: String, Standard: 'Seitenleiste' },
    Akkordeonname: { Typ: String, Standard: 'Seitenleiste' },
    sidebarGroupTitle: { Typ: Boolean, Standard: true }
  },
  Komponenten:
    Liste
  },
  berechnet: {
    Listenmenütitel ausblenden() {
      gib diesen.sidebarGroupTitle zurück
    }
  },
  montiert () {
  },
  Methoden: {
    activeLink (Element) {
      returniere core.getActiveLink(Element, this.$route.name)
    }
  }
}
</Skript>