Vue でメニュー権限制御を実装するためのサンプルコード

// router.js 疑似コード const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login');
const Home = r => require.ensure([],()=>r(require('../page/Home.vue')),'home');
const Forbidden = r => require.ensure([],()=>r(require('../page/403.vue')),'forbidden');
const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'notfound');
const Dashboard = r => require.ensure([],()=>r(require('../page/dashboard/Dashboard.vue')),'dashboard');
const SplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/SplashScreen.vue')),'splashScreen');
const AddSplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/AddSplashScreen.vue')),'addSplashScreen');

定数ルート = [
  {
    パス： '/'、
    リダイレクト: '/login'
  },{
    パス: '/login',
    コンポーネント: ログイン
  },{
    パス: '/404',
    コンポーネント: NotFound
  },{
    パス: '/home',
    コンポーネント: ホーム、
    リダイレクト: '/home/splashScreen',
    子供たち： [
      {
        パス: '/home/splashScreen',
        コンポーネント: SplashScreen、
        メタ: {
          タイトル:「国家奉仕 李白」
      },{
        パス: '/home/addSplashScreen',
        コンポーネント: AddSplashScreen、
        メタ: {
          タイトル: 国家奉仕 呂布
        }
      }
    ]
  }
];

// サイドバー.vue
<テンプレート>
  <div class="サイドバー">
    <el-メニュー>
      ...
    </el-menu>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        ルート: [
          {
           インデックス: '1',
           タイトル:「国家奉仕ジャングル」
           アイコン: 'iconfont icon-guanggao',
           子供たち： [
            {
             インデックス: 'splashScreen',
             タイトル: 「李白」
             子供たち： []
            }, 
           ]
          },
          {  
            インデックス: '2', 
            タイトル:「国家奉仕ミッドフィールダー」、 
            アイコン:'iconfont icon-tuisongguanli-',
          }
        ]
      }
    },
    メソッド: {
      レベルを取得する(){
        定数レベル = sessionStorage.getItem('level');
        if(レベル === '0'){
          this.routes.forEach(関数(値){
            if(value.title == "国家奉仕シングル"){
              値.hidden = true;
              value.children.forEach(関数(値){
                if(value.title=="関羽"){
                  値.hidden = true;
                }
              })
            }
          })
        }そうでない場合(レベル === '1'){
          this.routes.forEach(関数(値){
            値.hidden = true
            value.children.forEach(関数(値){
              値.hidden = true;
            })
          })
        }
      }
    },
    作成された(){
      レベルを取得します。
    }
  }
</スクリプト>

// components.js すべてのページ リソース const home = () => import('../page/Home.vue');
const splashScreen = () => import('../page/splashScreen/SplashScreen.vue');
const addSplashScreen = () => import('../page/splashScreen/AddSplashScreen.vue');
const editSplashScreen = () => import('../page/splashScreen/EditSplashScreen.vue');

エクスポートデフォルト{
  家、
  スプラッシュスクリーン、
  スプラッシュスクリーンを追加、
  スプラッシュスクリーンの編集、
  
};

// router.js よく使われるページを書くだけですっきりしませんか? import Vue from 'vue';
'vue-router' から Router をインポートします。

Vue.use(ルーター);

const Login = () => import('../page/login/Login.vue');
const Home = () => import('../page/Home.vue');
const Forbidden = () => import('../page/403.vue');
const Dashboard = () => import('../page/dashboard/Dashboard.vue');
定数ルート = [
  {
    パス： '/'、
    リダイレクト: '/login'
  },{
    パス: '/login',
    コンポーネント: ログイン
  },{
    パス: '/403',
    コンポーネント: 禁止
  },
  {
    パス: '/dashboard',
    コンポーネント: ダッシュボード、
  },
];
デフォルトの新しいルーターをエクスポートします({
  モード: '履歴'、
  ルート: ルート、
  ベース: __dirname、
  リンクアクティブクラス: 'link-active'
  
})

// main.js 疑似コードは特定の関連ロジックのみを保持します import routeMap from './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRoutes = function (routes, routeData) {
  ルートデータの場合
    ルートデータ = {
      名前: 'ホーム',
      パス: '/home',
      // コンポーネントが正常に一致した場合にのみ、特定のページ コンポーネントにアクセスできます: routeMap['home'],
      子供たち： []、
    };
  }
  ルートの長さ && ルートごとに(ルート => {
    if(ルート.コンポーネント) {
      ルートコンポーネント = routeMap[route.component];
      ルートデータ.children.push({
        パス: route.path、
        名前: ルート.インデックス、
        コンポーネント: route.component、
        メタ: {
          タイトル: ルート.title,
        },
      })
    }
    ルートの子とルートの子の長さが等しい場合
      ルートをフォーマットします(route.children、routeData);
    }
  });
  routeData を返します。
};

isFetchRemote を true にします。

//フック関数を使用してルートをリダイレクトします router.beforeEach((to, from, next) => {
  const ユーザー名 = sessionStorage.getItem('ユーザー名');
  if(!username && to.path !== '/login'){
    次へ({パス: '/login'});
  }
  そうでない場合 (isFetchRemote && to.path !== '/login') {
    ajaxPost('/resourceAPI/getMenuData').then(res =>{
      res.status === 200 && res.data.errno === 0 の場合 {
        isFetchRemote = false;
        const menuData = res.data.result;
        localStorage.setItem('menudata', JSON.stringify(menuData));
        const routeData = formatRoutes(menuData);
        resourceApp.$router.addRoutes([routeData].concat([
          {名前:'404'、パス:'/404'、コンポーネント:見つかりません},
          {パス:'*'、リダイレクト:'/404'}]));
        リソースApp.$router.push({
          パス: to.path,
          クエリ: to.query
        });
      }
      それ以外 {
        isFetchRemote = true;
      }
      次（）;
    })
    .catch(エラー => {
      コンソールログ(エラー);
    });  
  }
  それ以外 {
    次（）;
  }
});


const resourceApp = 新しいVue({
  ルーター、
  レンダリング: h => h(App)
}).$mount('#app');

//menuData リクエストデータ // 第 1 レベル メニューと第 2 レベル メニューの違いは、第 1 レベル メニューにはコンポーネントの値があることです。たとえば、次の SMS 管理には第 1 レベル メニューのみがあります {
  "エラー番号": 0, 
  "errmsg": "権限が正常に取得されました", 
  "結果"： [
    {
      "インデックス": "1", 
      "title": "ジャングルポジション", 
      "アイコン": "アイコンフォントアイコン-guanggao", 
      "子供たち"： [
        {
          "インデックス": "スプラッシュスクリーン", 
          "アイコン": "", 
          "タイトル": "ナコルル", 
          「パス」: 「/home/splashAdverse」、 
          "コンポーネント": "splashAdverse", 
          "isShow": 真
        }, 
        {
          "インデックス": "スプラッシュスクリーンを追加", 
          "アイコン": "", 
          "タイトル": "李白", 
          「パス」: 「/home/addAdverse」、 
          "コンポーネント": "addAdverse", 
          "isShow": 偽
        }, 
        
      ]
    }, 
    {
      "インデックス": "メッセージ", 
      "title": "国家奉仕最高位", 
      "アイコン": "アイコンフォントアイコン-duanxinguanli", 
      "パス": "/home/message", 
      "コンポーネント": "メッセージ", 
      "子供たち"： [
        {
          "インデックス": "メッセージを追加", 
          "title": "中国最高の関羽", 
          "アイコン": "", 
          "パス": "/home/addMessage", 
          "コンポーネント": "メッセージを追加", 
          "isShow": 偽
        }
        
      ]
    } 
  ]
}

// ダッシュボード疑似コード <テンプレート>
  <div class="nav_list">
    <div class="nav_list_item" v-for="navList 内のアイテム" @click="goPage(item)">
      <i :class="item.icon"></i>
      <h2>{{item.title}}</h2>
    </div>
  </div>            
</テンプレート>

<スクリプト> 
  作成された(){
    定数 routeArr = JSON.parse(localStorage.getItem('menudata'));
    this.navList = ルートArr;
  }, 
  メソッド: {
    ページへ移動(アイテム){
      // 1レベルメニューのみ if (item.component) {
        this.$router.push(item.path);
      }それ以外{
        // セカンダリメニューのデータ構造には子のパスのみが含まれます
        this.$router.push(item.children[0]['path']);
      }
    }
  }
</スクリプト>

// サイドバー疑似コード <script>
  エクスポートデフォルト{
    データ（） {
      戻る {
        ルート: [],
      }
    },
    メソッド: {
      バウンサー(arr){
        arr.filter(function(val){ を返す
         戻り値 !(!val || val === "");
        });
      }
    },
    作成された(){
      const menuData = JSON.parse(localStorage.getItem('menudata'));
      // 現在のルーターのパスに対応するルーティング配列全体をマップします。letroutes = menuData.map((item)=>{

        // ルーティングは1レベルのみ if (item.component && item.path == this.$route.path) {
          コンソール.log(アイテム)
          返品商品;
        }それ以外{
          if(item.children[0]['path'] == this.$route.path){
            コンソール.log(アイテム)
            返品商品;
          }
        }
      })
      // 配列内の未定義、null、その他の空の値と false の値を削除します。 this.routes = this.bouncer(routes);
    }
  }
</スクリプト>