vue権限メニュー

ルーティングとメニューがバックグラウンドで返されると、メニューとルーティングのフォーマットは実際の状況とバックグラウンドで相談して返されます.
全体の流れは以下の1、router.jsには権限を必要としないルーティングのみが格納される.2、login.vueでは、要求されたルーティングおよびメニューデータがローカルおよびvuexに存在します.3、vuexでルーティングデータを処理し、addRouteで追加する

/*           */
path: [{
  component: 'Home',  /*              ，      ，            */
  name: 'Home',
  path: '/home',
  children: [{
     component: 'Dome111',
     name: 'Dome111',
     path: '/dome111',
     children: null
  }, {
     component: 'Dome222',
     name: 'Dome222',
     path: '/dome222',
     children: null
  }]
}];
/*        */

router.jsには権限を必要としないルーティングのみがマウントされます

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [{
    path: '/login',
    name: 'login',
    component: require('@/components/login/login')
  }, {
      path: '*',
      name: '404',
      component: require('@/components/404/404')
  }]
export default new Router({
  routes
});

loginコンポーネントで要求を送信し、取得したデータをlocalStorageとvuexにそれぞれ格納する.

/*login.vue*/
import { mapActions } from 'vuex'
methods： {
 ...mapActions(['add_Routes']),
 login({
   name: 'admin',
   password: '******'
 }).then(res => {
  if(res.code == 200) {
    /*                 */
    localStorage.setItem('token', res.data.token);
    localStorage.setItem('menu', JSON.stringify(res.data.menu));
    localStorage.setItem('routes', JSON.stringify(res.data.routes));
    /*  vuex，    */
    this.add_Routes(res.data.path);
   }
 })
}

vuexでstore/modules/addRouterを作成します.js,addRouteでルーティングを追加する

import router from '../../router/index.js'; /*       */
import Menufilter from './menufilter'; /*           component   */

const mutations = {
  ADD_ROUTES(state, addRouter) {
    let routes = [];
    Menufilter(routes, addRouter);
    router.addRoutes(routes);
    router.push('/home');
  }
};

const actions = {
  add_Routes({commit}, addrouter) {
    commit('ADD_ROUTES', addrouter);
  }
};

export default {
  mutations,
  actions
};

components.js定義ルーティング

const home= () => import('@/components/home'), 
      dome111= () => import('@/components/dome111'), 
      dome222= () => import('@/components/dome222')
export default {
  home,
  dome111,
  dome222,
};

Menufilter.jsバックエンドで返されるcomponentフィールドを置き換える

//      
import Components from '@/asses/components.js';

export default (routers, data) => {
  generaRouter(routers, data);
};

function generaRouter(routers, data){
  if(data && data.length > 0) {
    data.forEach((item) => {
      let menu = Object.assign({}, item);
      menu.component = Components[menu.component];
      if(item.children){
        menu.children = [];
        generaRouter(menu.children,item.children);
      }
      routers.push(menu);
    });
  }
};

ダイナミックルーティングが追加されました.ページをリフレッシュすると無効になります.mainが必要です.jsに格納されている再割り当て.

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import router from './router';
import store from './store/index.js';
Vue.use(Vuex);
//         ，        ，     
if (localStorage.getItem('token')) {
  let path = JSON.parse(localStorage.getItem('routes'));
  store.dispatch("add_Routes", path)
}

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem('token ');
  if(!token && to.path !== '/login') {
    next({name: 'login'});
  } else {
    next();
  }
});

大功を成し遂げる.リファレンスhttps://github.com/liuyangjike/dynamic-router