vue vuex vue-rouertバックグラウンドプロジェクト-権限ルーティング(超詳細単純版)

プロジェクトアドレス:vue-simple-templateの3つのロール:adan barbara carrieパスワードはすべて:123456
adanは最高の権限Aを持っています彼はredを見ることができて、yellowとblueページ(全部で3つのページ)barbaraは権限Bを持っています彼はredとyellowページcarrieは権限Cを持っています彼はredとblueページを見ることができます
テクノロジースタック

webpack         ----     
vue             ---- JavaScript   
vuex            ----             
vue-router      ----     
babel-polyfill  ----  ES6    ES5  
normalize.css   ----          
element-ui      ---- UI   

プロジェクトの初期化

# cd       
cd weven-simple-template
#      （                 package.json   ）
npm install
#     
npm run dev

プロジェクト構造
vue-cil足場初期化プロジェクトの後、srcフォルダのみを変更しました.

src
├── App.vue         ----     
├── api             ---- api  
│   └── login.js    ----   json    
├── assets          ----           
│   └── logo.png
├── components      ----   
│   ├── index.vue
│   └── login.vue 
├── main.js         ----           
├── router          ----   
│   └── index.js
└── store           ---- vuex    
    ├── getters.js
    ├── index.js
    └── modules
        └── login.js

ポイント:
動的ルーティングの鍵はrouter構成のmetaフィールドとvuexの状態が共存することにある

// ----  router/index.js  ----
//      
export default new Router({  
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]  
});
//      meta    role
export const powerRouter =[    
    { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
      children: [
        { path: '/red', name: 'red', component: red,},
        { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
        { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
      ]
    }
];

//----  store/modules/login.js  actions    ----
Logins({ commit }, info){
          return new Promise((resolve, reject) => {
              let data={};
              loginByUserInfo.map(function (item) { //        
                  if(info.username === item.username || info.pew === item.pew){
                      commit('SET_USERNAME',item.username);  // username role    
                      sessionStorage.setItem('USERNAME', item.username); //   session 
                      commit('SET_ROLE',item.role);
                      sessionStorage.setItem('ROLE', item.role);
                      return data={username:item.username,introduce:item.introduce};
                  }else{
                      return data;
                  }
            });  
              resolve(data);
        }).catch(error => {
            reject(error);
        });
      },
      Roles({ commit }, newrouter){
        return new Promise((resolve, reject) => {
              commit('SET_NEWROUER',newrouter); //      
              resolve(newrouter);
        }).catch(error => {
            reject(error);
        });
      },

// ----  main.js  ----
router.beforeEach((to, from, next) => {
    if(store.getters.role){ //  role     
        
        if(store.getters.newrouter.length !== 0){  
               next() //resolve   
        }else{
            let newrouter
               if (store.getters.role == 'A') {  //    
                newrouter = powerRouter
            } else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                        if(route.meta.role == store.getters.role){
                            return true
                        }
                        return false
                    }else{
                        return true
                    }
                });
                newrouter = powerRouter
                newrouter[0].children = newchildren
            }
            router.addRoutes(newrouter) //      
            store.dispatch('Roles',newrouter).then(res => { 
                next({ ...to })
            }).catch(() => {       

            })
        }      
    }else{
           if (['/login'].indexOf(to.path) !== -1) { 
           next()
        } else {
           next('/login')
        }
    }
})

// ----  components/index.vue  ----
// mapGetters          store    getter          

...mapGetters([
        'newrouter'
    ])
    

このプロジェクトはvue+vuex+vue-routerの関係を明らかにするのに問題ありません.これは超簡単なバージョンで、初学に適しています.関連する公式ドキュメントに合わせて学ぶことができます.上記の内容のポイントは、実はプロジェクトのすべてです.
プロジェクトアドレス:vue-simple-template悪くなければstarをください～ありがとうございます
何か質問がありましたら～