Vueでルーティング権限を動的に設定する主なアイデア

定数 routerArr = [
 {
 パス： ''、
 名前： ''、
 コンポーネント: () => import( /* webpackChunkName: "strategiesMaintain" */ '@/components/Layout/Index'),
 メタ: {
 認証が必要: true、
 id: 1,
 アイコン: 'iconzhanghuguanli',
 タイトル:「ルート1」
 },
 子供たち： [{ 
 パス: '/verificationLog',
 名前: 'VerificationLog',
 コンポーネント: () => import( /* webpackChunkName: "verificationLog" */ '@/views/auditManage/verificationLog'),
 メタ: {
 認証が必要: true、
 id: 101,
 アイコン: 'icon-disanfangyanzhengrizhi',
 タイトル:「ルート11」
 }
 }, {
 パス: '/systemLog',
 名前: 'SystemLog',
 コンポーネント: () => import( /* webpackChunkName: "systemLog" */ '@/views/auditManage/systemLog'),
 メタ: {
 認証が必要: true、
 id: 102,
 アイコン: 'icon-xitongcaozuorizhi',
 タイトル:「ルート12」
 }
 }]
 }
];

デフォルトの routerArr をエクスポートします。

「@/router/modules」から routerModules をインポートします。
'@/utils/http' から {http} をインポートします。
'@/store' からストアをインポートします。
'element-ui' から { Message } をインポートします

const formateResData = (val) =>{ // ルーティングデータをフォーマットします const obj = {};
 定数fn = (arr)=>{
  for(let i = 0,item;item = arr[i++];){
  オブジェクト[アイテム['メタ']['id']] = {
   パス: アイテム['パス'],
   アイコンクラス: item['meta']['icon']
  };
  （item.children && item.children.length > 0）の場合{
   fn(アイテム.children);
  }
  }
 }
 fn(値);
 obj を返します。
};

const MAPOBJ = formatResData(ルーターモジュール);
const dealWithData = (navData) => { // メニューデータを処理する let firstLink = "";
 定数navIdArr = [];
 定数fn = (arr) => {
  (let i = 0,item;item = arr[i++];) {
  item['iconClass'] = MAPOBJ[item.id].iconClass;
  アイテム['linkAction'] = MAPOBJ[item.id].path;
  navIdArr.push(アイテムID);
  if (!firstLink && !item.subMenu) { // デフォルトのジャンプを設定する firstLink = item['linkAction'];
  }
  if (item.subMenu && item.subMenu.length > 0) {
   fn(item.subMenu);
  }
  }
 }
 fn(ナビゲーションデータ);
 {navData、navIdArr、firstLink} を返します。
};

navIds = [] とします。

const getNav = async (to={},from={},next=()=>{})=>{ // ナビゲーション データを取得します const {code,data} = await http("/menu/list", {}, "GET"); // メニュー データを取得します // const data = require("@/mock/api/menuData"); // モック データを使用します const {navData,navIdArr,firstLink} = dealWithData(data);
 ストアをコミットします('setNavData', navData);
 navIds = navIdArr;
 if(to.fullPath == '/index'){ // ログインするかホームページに戻る next(firstLink);
 }else { // Refreshif(navIds.indexOf(to.meta.id) == -1){ // バックエンドは menuMessage.error('メニューが存在しないか、権限がありません') を返しませんでした。
  戻る;
 }
 次（）;
 }
}

export const setGuard = (to={},from={},next=()=>{}) =>{ // 権限を設定します if(navIds.length === 0){ // メニューデータがまだ取得されていません getNav(to,from,next);
 }else { // メニューデータを取得します if(navIds.indexOf(to.meta.id) == -1){ // バックエンドはメニューを返しませんでした Message.error('メニューが存在しないか、権限がありません');
  戻る;
 }
 次（）;
 }
}

router.beforeEach((to, from, next) => {
 トークンを wlhStorage.get("authorization");
 to.path == "/login"の場合{
 storage.clear(); // キャッシュをクリア next();
 } それ以外 {
 if (to.meta.requireAuth && token) { // ログイン setGuard(to,from,next);
 } else { // ログインしていない next("/login");
 }
 }
})