Informationen zum dynamischen Hinzufügen von Routen basierend auf Benutzerberechtigungen in Vue

<Vorlage>
  <div>
    <el-Menü
      :default-active="$route.pfad"
      Klasse = "el-menu-vertical-demo menu_wrap"
      Hintergrundfarbe = "#324057"
      Textfarbe = "weiß"
      Aktive Textfarbe = "#20a0ff"
      :collapse="istCollapse"
      einzigartig geöffnet
      Router
    >
      <el-Untermenü
        v-for="Artikel in $store.state.Routers"
        :Schlüssel="item.path"
        :index="item.pfad"
        v-if="!item.hidden"
      >
        <Vorlagenslot="Titel" >
          <i class="el-icon-location"></i>
          <span>{{ item.meta.title }}</span>
        </Vorlage>
        <div v-for="chi in item.children" :key="chi.name">
          <el-menu-item v-if="!chi.hidden" :index="item.pfad + '/' + chi.pfad">
            <i class="el-icon-location"></i>{{ chi.meta.title }}
          </el-Menüelement>
        </div>
      </el-Untermenü>
    </el-Menü>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Menüliste",
  Daten() {
    zurückkehren {
      isCollapse: false,
    };
  },
  erstellt() {
    dies.$bus.$on("getColl", (Daten) => {
      this.isCollapse = Daten;
    });
  },
  Methoden: {

  }
};
</Skript>

<Stilbereich>
.menu_wrap {
  Höhe: 100vh;
}
.el-menu-vertical-demo:nicht(.el-menu--collapse) {
  Breite: 200px;
  Höhe: 100vh;
}
</Stil>

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Store aus „../store/index“ importieren

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = Funktion push(Standort) {
  gebe originalPush.call(diesen, Standort).catch(err => err) zurück
}

exportiere const Routen = [
  {
    Pfad: '/home',
    Name: 'Vorname',
    Komponente: () => import('../views/Index.vue'),
    meta: { Titel: 'Homepage'},
    Kinder: [
      {
        Pfad: 'Index',
        Name: "Home",
        Komponente: () => import('../views/Home'),
        meta: { title: 'Home', Rollen: ['Kunde'] }
      }
    ]
  },
  {
    Pfad: '/index',
    Name: 'NavigationOne',
    Komponente: () => import('../views/Index.vue'),
    meta: { title: 'Navigation 1'},
    Kinder: [
      {
        Pfad: 'Personal',
        Name: 'Personal',
        Komponente: () => import('../views/One/Personnel.vue'),
        meta: { title: 'Personal', Rollen: ['Kunde'] }
      },
      {
        Pfad: "Konto",
        Name: 'Konto',
        Komponente: () => import('../views/One/Account.vue'),
        meta: { title: 'Konto', Rollen: ['Kunde'] }
      },
      {
        Pfad: 'psw',
        Name: „psw“,
        Komponente: () => import('../views/One/Password.vue'),
        meta: { Titel: 'psw', Rollen: ['Kunde'] }
      }
    ]
  },
  {
    Pfad: '/Karte',
    Name: 'NavigationTwo',
    Komponente: () => import('../views/Index.vue'),
    meta: { title: 'Navigation 2'},
    Kinder: [
      {
        Pfad: "Aktivität",
        Name: "Aktivität",
        Komponente: () => import('../views/Three/Activity.vue'),
        meta: { title: 'Aktivität', Rollen: ['Kunde'] }
      },
      {
        Pfad: 'Soziales',
        Name: "Sozial",
        Komponente: () => import('../views/Three/Social.vue'),
        meta: { title: 'Soziales', Rollen: ['Kunde'] }
      },
      {
        Pfad: "Inhalt",
        Name: 'Inhalt',
        Komponente: () => import('../views/Three/Content.vue'),
        meta: { title: 'Inhalt', Rollen: ['Kunde'] }
      }
    ]
  },
  {
    Pfad: '/zwei',
    Name: 'NavigationThree',
    Komponente: () => import('../views/Index.vue'),
    meta: { title: 'Navigation 3'},
    Kinder: [
      {
        Pfad: 'Index',
        Name: 'Zwei',
        Komponente: () => import('../views/Two'),
        meta: { title: 'Zwei', Rollen: ['Kunde'] }
      }]
  },
  {
    Pfad: '/404',
    Name: 'Fehler',
    versteckt: wahr,
    Meta: {Titel: 'Fehler'},
    Komponente: () => import('../views/Error')
  }
]

exportiere const asyncRouter = [
  //Agent3 Mitarbeiter2
  {
    Pfad: '/agent',
    Komponente: () => import('../views/Index.vue'),
    Name: 'Agent',
    meta: { Titel: 'Agent', Rollen: ['Agent', 'Mitarbeiter']},
    Kinder: [
      {
        Pfad: 'eins',
        Name: 'agentOne',
        Komponente: () => import('@/views/agent/One'),
        meta: { Titel: 'agentOne', Rollen: ['Agent', 'Mitarbeiter'] }
      },
      {
        Pfad: 'zwei',
        Name: 'agentTwo',
        Komponente: () => import('@/views/agent/Two'),
        Meta: { Titel: 'agentTwo', Rollen: ['Agent'] }
      },
      {
        Pfad: 'drei',
        Name: "agentThree",
        Komponente: () => import('@/views/agent/Three'),
        meta: { Titel: 'agentThree', Rollen: ['Agent', 'Mitarbeiter'] }
      }
    ]
  },
  //Mitarbeiter3
  {
    Pfad: '/staff',
    Komponente: () => import('../views/Index.vue'),
    Name: 'Mitarbeiter',
    meta: { title: 'Mitarbeiter', Rollen: ['Mitarbeiter']},
    Kinder: [
      {
        Pfad: 'eins',
        Name: 'StaffOne',
        Komponente: () => import('@/views/Staff/One'),
        Meta: { Titel: 'StaffOne', Rollen: ['Mitarbeiter'] }
      },
      {
        Pfad: 'zwei',
        Name: 'StaffTwo',
        Komponente: () => import('@/views/Staff/Two'),
        Meta: { Titel: 'StaffTwo', Rollen: ['Mitarbeiter'] }
      },
      {
        Pfad: 'drei',
        Name: 'StaffThree',
        Komponente: () => import('@/views/Staff/Three'),
        meta: { Titel: 'StaffThree', Rollen: ['Mitarbeiter'] }
      }
    ]
  },
  { Pfad: '*', Umleitung: '/404', versteckt: true }
]

const router = neuer VueRouter({
  Routen
})


router.beforeEach((bis, von, weiter) => {
  let Rollen = ['Mitarbeiter']
  wenn(store.state.Routers.length) {
    Konsole.log('ja')
    nächste()
  } anders {
    console.log('nicht')
    store.dispatch('asyncGetRouter', {roles})
    .then(res => {
      router.addRoutes(store.state.addRouters)
    })
    neben})
    // Der Unterschied zwischen next() und next({ ...to }): next() ermöglicht next('/XXX'), unendlich lange abzufangen}
})

Standardrouter exportieren

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Module aus „./module“ importieren

importiere Router, {Routen, asyncRouter} von '../Router'

Funktion hatBerechtigung(Route, Rollen) {
  wenn (route.meta && route.meta.roles) {
    returniere roles.some(role => route.meta.roles.indexOf(role) >= 0)
  } anders {
    returniere wahr
  }
  
}

/*
  Filtern Sie die asynchrone Routing-Tabelle rekursiv, um Routen zurückzugeben, die der Benutzerrolle entsprechen @param asyncRouter asynchrones Routing @param Rollen Benutzerrolle*/
Funktion filterAsyncRouter(asyncRouter, Rollen) {
  let filterRouter = asyncRouter.filter(route =>{
    wenn (hasPermission (Route, Rollen)) {
      wenn (route.Kinder && route.Kinder.Länge) {
          route.children = filterAsyncRouter(route.children, Rollen)
      }
      returniere wahr 
    }
    return false
  })
  RücklauffilterRouter
}

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    addRouter: [],
    Router: []
  },
  Mutationen:
    getRouter(Status, paload) {
      // konsole.log(paload)
      Zustand.Router = Routen.concat(paload)
      state.addRouters = paload
      // router.addRoutes(paload)
    }
  },
  Aktionen: {
    asyncGetRouter({ commit }, data) {
      const { Rollen } = Daten
      gib ein neues Versprechen zurück (Auflösen => {
        let addAsyncRouters = filterAsyncRouter(asyncRouter, Rollen)
        commit('getRouter', addAsyncRouters)
        lösen()
      })
    }
  }
})