Vue implementiert dynamische Routingdetails

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

Vue.use(Router)

Layout aus '@/layout' importieren

// constantRoutes statisches Routing, hauptsächlich Anmeldeseite, 404-Seite usw. erfordern kein dynamisches Routing export const constantRoutes = [
  {
    Pfad: '/redirect',
    Komponente: Layout,
    versteckt: wahr,
    Kinder: [
      {
        Pfad: '/redirect/:Pfad*',
        Komponente: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    Pfad: '/login',
    Komponente: () => import('@/views/login/index'),
    versteckt: wahr
  },
  {
    Pfad: '/404',
    Komponente: () => import('@/views/error-page/404'),
    versteckt: wahr
  },
  {
    Pfad: '/401',
    Komponente: () => import('@/views/error-page/401'),
    versteckt: wahr
  }
] 

// asyncRoutes dynamisches Routing exportieren const asyncRoutes = [
  {
    Pfad: '/permission',
    Komponente: Layout,
    Umleitung: '/permission/page',
    alwaysShow: true, 
    Name: 'Berechtigung',
    Meta: {
      Titel: 'Erlaubnis',
      Symbol: 'Schloss',
      // Der Kerncode kann von den zugewiesenen Rollen durchlaufen werden, um zu bestimmen, ob er angezeigt werden soll // Dies bedeutet die beiden Rollen „Administrator“ und „Editor“. Dieses Menü kann Rollen anzeigen: ['Administrator', 'Editor']
    },
    Kinder: [
      {
        Pfad: "Seite",
        Komponente: () => import('@/views/permission/page'),
        Name: 'Seitenberechtigung',
        Meta: {
          Titel: 'Seitenberechtigung',
          // Das bedeutet, dass nur der Administrator Rollen anzeigen kann: ['admin']
        }
      }
     ]
    }
]

const createRouter = () => neuer Router({
  scrollBehavior: () => ({ y: 0 }),
  Routen: konstanteRouten
})

const router = createRouter()

// Dies wird zum Zurücksetzen des Routers verwendet, sehr nützlich, sehen Sie sich diese paar Codezeilen nicht an export function resetRouter() {
  const neuerRouter = createRouter()
  router.matcher = neuerRouter.matcher 
}

Standardrouter exportieren

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

// Diese Methode wird verwendet, um Rollen mit der Funktion route.meta.role abzugleichen hasPermission(roles, route) {
  wenn (route.meta && route.meta.roles) {
    returniere roles.some(Rolle => route.meta.roles.includes(Rolle))
  } anders {
    returniere wahr
  }
}


// Diese Methode verwendet Rekursion, um die Routen zu durchlaufen und die Routen mit Berechtigungen zu durchlaufen. Exportfunktion filterAsyncRoutes(routes, roles) {
  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) => {
    // Dieser Ort verwaltet zwei Zustände, einen für „addRouters“ und einen für „Routes“.
    state.addRoutes = Routen
    Zustand.Routen = konstanteRouten.concat(Routen)
  }
}

const Aktionen = {
  Routes generieren({ commit }, Rollen) {
    gib ein neues Versprechen zurück (Auflösen => {
      let abgerufeneRouten
      wenn (Rollen.includes('admin')) {
        aufgerufeneRouten = asynchroneRouten || []
      } anders {
        // Kerncode, übergebe die Route und die erhaltene Rolle (im Hintergrund erhalten) zum Abgleichen von accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      // Die übereinstimmenden und autorisierten Routen auf vuex commit('SET_ROUTES', accessedRoutes) setzen
      auflösen(Zugriffsrouten)
    })
  }
}

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

// Berechtigung.js
router.beforeEach((bis, von, weiter) => {
  if (store.getters.token) { // Prüfen, ob ein Token vorhanden ist
    wenn (zu.Pfad === '/login') {
      nächster({ Pfad: '/' });
    } anders {
        // Bestimmen Sie, ob der aktuelle Benutzer alle user_info-Informationen abgerufen hat, wenn (store.getters.roles.length === 0) {
        store.dispatch('GetInfo').then(res => { // Informationen abrufen
          const Rollen = res.data.role;
          // Übergeben Sie die erhaltene Rolle zum Abgleichen und Generieren zugänglicher Routen store.dispatch('GenerateRoutes', { roles }).then(() => { 
            // Zugängliche Routingtabellen dynamisch hinzufügen (Kerncode, ohne ihn geht nichts)
            router.addRoutes(store.getters.addRouters)
            
            // Hack, um sicherzustellen, dass addRoutes vollständig ist. next({ ...to, replace: true })
          })
        }).catch(err => {
          console.log(fehler);
        });
      } anders {
        next() //Wenn eine Benutzerberechtigung vorliegt, bedeutet dies, dass alle zugänglichen Routen generiert wurden. Wenn Sie keine Zugriffsberechtigung haben, gelangen Sie automatisch auf die 404-Seite.}
    }
  } anders {
    if (whiteList.indexOf(to.path) !== -1) { // In der Login-freien Whitelist direkt zu next() gehen;
    } anders {
      next('/login'); // Andernfalls alle zur Anmeldeseite weiterleiten}
  }
})

<!-- layout/komponenten/seitenleiste.vue -->
<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"
>
    // Durchlaufe die Routen und übergebe sie als Parameter an die untergeordnete Komponente <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-Menü>
// Autorisierte Routen abrufen routes() {
  gib dies zurück.$router.options.routes
}


<!-- layout/komponenten/siderbarItem.vue -->
  <Vorlagenslot="Titel">
    <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
  </Vorlage>
  <Seitenleistenelement
    v-for="Kind in Element.Kinder"
    :Schlüssel="Kind.Pfad"
    :ist-nest="wahr"
    :item="Kind"
    :Basispfad="Auflösungspfad(untergeordneter.Pfad)"
    Klasse = "Nest-Menü"
  />

  Requisiten: {
    // Routenobjekt
    Artikel:
      Typ: Objekt,
      erforderlich: true
    },
    istNest: {
      Typ: Boolean,
      Standard: false
    },
    Basispfad: {
      Typ: Zeichenfolge,
      Standard: ''
    }
  }

Routes generieren({ commit }, data) {
  returniere neues Promise((lösen, ablehnen) => {
    getRoute(Daten).then(res => {
     //Konvertiere die erfassten Daten und speichere sie in vuex const accessedRouters = arrayToMenu(res.data)
      zugegriffenRouters.concat([{ Pfad: '*', Umleitung: '/404', versteckt: true }])
      commit('SET_ROUTERS', aufgerufene Router)
      lösen()
    }).fangen(Fehler => {
      ablehnen(Fehler)
    })
  })
}

// Seitenroutingformat {
    Pfad: '/form',
    Komponente: Layout,
    Kinder: [
      {
        Pfad: 'Index',
        Name: 'Formular',
        Komponente: () => import('@/views/form/index'),
        Meta: {Titel: „Formular“, Symbol: „Formular“}
      }
    ]
}

// Datenformat nach der Sortierung // Menü der ersten Ebene // Als Menü der ersten Ebene kann ParentId 0 verwendet werden. Am besten wählt man eine 4-stellige ID. Den Grund dafür erfährst du, wenn du das Projekt entwickelst.
    ID: 1300
    übergeordnete ID: 0
    Titel: "Menüverwaltung"
    Pfad: "/menu"
    versteckt: false
    Komponente: null
    versteckt: false
    Name: "Menü"
},

// Sekundäres Menü // Wenn parentId nicht 0 ist, können Sie parentId mit der ID des primären Menüs abgleichen und die passende ID in children { einfügen.
    ID: 1307
    übergeordnete ID: 1300
    Titel: "Untermenü"
    versteckt: false
    Pfad: "menuItem"
    Komponente: „menu/menuItem“ // Zum Abgleichen mit der lokalen Dateiadresse hidden: false
    Name: "Menüelement"
}

Exportfunktion arrayToMenu(array) {
  const Knoten = []
  // Hole den obersten Knoten für (let i = 0; i < array.length; i++) {
    const Zeile = Array[i]
    // Diese Exists-Methode dient zum Ermitteln, ob ein untergeordnetes Element vorhanden ist, if (!exists(array, row.parentId)) {
      Knoten.push({
        path: row.path, // Routenadresse hidden: row.hidden, // alles true, wenn das Backend nicht konfiguriert ist component: Layout, // entspricht grundsätzlich der Komponente deiner Datei
        Name: row.name, // Routenname Meta: { Titel: row.title, Symbol: row.name }, // Titel ist der angezeigte Name ID: row.id, // Routen-ID
        Umleitung: „noredirect“
      })
    }
  }
  const toDo = Array.from(Knoten)
  während (toDo.Länge) {
    const node = toDo.shift()
    // Untergeordnete Knoten abrufen für (let i = 0; i < array.length; i++) {
      const Zeile = Array[i]
      // Push zum übergeordneten Element, dessen parentId gleich if (row.parentId === node.id) { ist.
        const Kind = {
          Pfad: Zeile.Pfad,
          Name: Zeile.Name,
          versteckt: Zeile.versteckt,
          // Kerncode, da die Komponente der sekundären Route mit der Komponente der Seite übereinstimmen muss: require('@/views/' + row.component + '/index.vue'),
          Meta: { Titel: Zeile.Titel, Symbol: Zeile.Name },
          ID: Zeile.ID
        }
        wenn (Knoten.Kinder) {
          node.children.push(Kind)
        } anders {
          node.children = [Kind]
        }
        toDo.push(Kind)
      }
    }
  }
  Rückgabeknoten
}
// Prüfen, ob untergeordnete Elemente vorhanden sind function exists(rows, parentId) {
  für (lass i = 0; i < Zeilen.Länge; i++) {
    wenn (Zeilen[i].id === parentId) true zurückgeben
  }
  return false
}