Die Hauptidee zum dynamischen Festlegen von Routing-Berechtigungen in Vue

const routerArr = [
 {
 Weg: '',
 Name: '',
 Komponente: () => import( /* webpackChunkName: "strategiesMaintain" */ '@/components/Layout/Index'),
 Meta: {
 requireAuth: wahr,
 ID: 1,
 Symbol: ‚iconzhanghuguanli‘,
 Titel: 'Route 1'
 },
 Kinder: [{ 
 Pfad: '/verificationLog',
 Name: 'VerificationLog',
 Komponente: () => import( /* webpackChunkName: "verificationLog" */ '@/views/auditManage/verificationLog'),
 Meta: {
 requireAuth: wahr,
 ID: 101,
 Symbol: „Symbol-disanfangyanzhengrizhi“,
 Titel: 'Route 11'
 }
 }, {
 Pfad: '/systemLog',
 Name: 'SystemLog',
 Komponente: () => import( /* webpackChunkName: "systemLog" */ '@/views/auditManage/systemLog'),
 Meta: {
 requireAuth: wahr,
 ID: 102,
 Symbol: „Symbol-xitongcaozuorizhi“,
 Titel: „Route 12“
 }
 }]
 }
];

Standard-RouterArr exportieren;

importiere RouterModule aus "@/router/modules";
importiere {http} von '@/utils/http'
Store aus „@/store“ importieren;
importiere { Nachricht } von 'element-ui'

const formateResData = (val) =>{ // Routing-Daten formatieren const obj = {};
 const fn = (arr)=>{
  für (lass i = 0, Artikel; Artikel = arr[i++];) {
  Objekt[Element['meta']['id']] = {
   Pfad: Element['Pfad'],
   Symbolklasse: Element ['Meta'] ['Symbol']
  };
  wenn (Element.Kinder && Element.Kinder.Länge > 0) {
   fn(Element.Kinder);
  }
  }
 }
 fn(Wert);
 gibt Objekt zurück;
};

const MAPOBJ = formateResData(routerModules);
const dealWithData = (navData) => { // Menüdaten verarbeiten let firstLink = "";
 const navIdArr = [];
 const fn = (arr) => {
  für (sei i = 0,item;item = arr[i++];) {
  Element['iconClass'] = MAPOBJ[item.id].iconClass;
  Element['linkAction'] = MAPOBJ[item.id].Pfad;
  navIdArr.push(Artikel-ID);
  if (!firstLink && !item.subMenu) { // Standardsprung festlegen firstLink = item['linkAction'];
  }
  wenn (item.subMenu && item.subMenu.length > 0) {
   fn(Element.Untermenü);
  }
  }
 }
 fn(navData);
 gibt {navData,navIdArr,firstLink} zurück;
};

Lassen Sie navIds = [];

const getNav = async (to={},from={},next=()=>{})=>{ // Navigationsdaten abrufen const {code,data} = await http("/menu/list", {}, "GET"); // Menüdaten abrufen // const data = require("@/mock/api/menuData"); // Mock-Daten verwenden const {navData,navIdArr,firstLink} = dealWithData(data);
 store.commit('setNavData', navData);
 navIds = navIdArr;
 if(to.fullPath == '/index'){ // Anmelden oder zur Startseite zurückkehren next(firstLink);
 }else { // Refreshif(navIds.indexOf(to.meta.id) == -1){ // Das Backend hat die menuMessage.error('Das Menü existiert nicht oder hat keine Berechtigung'); nicht zurückgegeben.
  zurückkehren;
 }
 nächste();
 }
}

export const setGuard = (to={},from={},next=()=>{}) =>{ // Berechtigungen festlegen if(navIds.length === 0){ // Menüdaten wurden noch nicht abgerufen getNav(to,from,next);
 }else { // Menüdaten abrufen if(navIds.indexOf(to.meta.id) == -1){ // Das Backend hat das Menü nicht zurückgegeben Message.error('Das Menü existiert nicht oder es liegt keine Berechtigung vor');
  zurückkehren;
 }
 nächste();
 }
}

router.beforeEach((bis, von, weiter) => {
 let token = wlhStorage.get("Autorisierung");
 wenn (zu.Pfad == "/login") {
 storage.clear(); // Cache leeren next();
 } anders {
 if (to.meta.requireAuth && token) { // Anmelden setGuard(to,from,next);
 } else { // Nicht angemeldet next("/login");
 }
 }
})