VueRouterのaddRoutes方法を使用して、動的にユーザを追加する権限ルートを実現します。

最近では、vue単一ページのプロジェクトは、マルチキャラクターのユーザー権限の問題に関連しています。異なるキャラクターのユーザーは、異なる機能権限を持っています。
git:https://github.com/pch1024/dynamicRouter

    ：
    A =>  1
     =>  2
     =>  3
     
    B =>  1
     =>  4
     =>  5

第1ステップは、デフォルトのルーティングとダイナミックなルーティングを定義する。

//    (         ,                   ，       )
export const dynamicRouter = [
  { path: '/b', name: 'b', component: pageB },
  { path: '/c', name: 'c', component: pageC },
];

//    (         )
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: pageLogin},
  { path: '/404', component: page404},
  { path: '*', redirect: '/404' },
];

const router = new VueRouter({
  mode: 'history',
  routes, // (  )     routes: routes
});

第2ステップアクセス権限ルール
もちろん、ログインはtoken、ユーザー情報などを取得します。私達はしばらく注目していません。私達の権限規則は多くのところで使わなければなりません。だから私達はそれをvuexに保存します。

// vue   
<li @click="login(['b'])">
     1  ，  ['b']，     B
</li>
<li @click="login(['c'])">
     2  ，  ['c']，     B,(  2    B  ，     gun   404)
</li>

//     ---------------------------------------------------------
import { mapActions } from "vuex";
export default {
 methods: {
  ...mapActions([
   "set_roleRouterRules"
  ]),
  login(roleRouterRules) {
   //     ，vuex       
   this.set_roleRouterRules(roleRouterRules);
   //        B
   this.$router.replace({ path: "/b" });
  }
 }
};

// vuex       -----------------------------------------------
//    1     dynamicRouter 
import { dynamicRouter } from './router';
//     
state: {
  isAddRoutes: false,
  //               localStorage，        
  roleRouterRules: JSON.parse(localStorage.getItem('roleRouterRules')),
},
//      =>       
getters: {
  isAddRoutes: state => state.isAddRoutes,
  //    roleRouterRules                （addRoutes             )
  roleRouter: state => {
    if (state.roleRouterRules) {
      return dynamicRouter.filter(
        router => state.roleRouterRules.indexOf(router.name) >= 0,
      );
    } else return null;
  },
},
//     (  ) =>       
mutations: {
  set_isAddRoutes: (state, data) => (state.isAddRoutes = data), // payload: true/false
  set_roleRouterRules: (state, data) => (state.roleRouterRules = data), // payload: true/false
},
//     （   ）=>       
actions: {
  set_isAddRoutes({ commit }, data) {
    commit('set_isAddRoutes', data);
  },
  set_roleRouterRules({ commit }, data) {
    //    vuex
    commit('set_roleRouterRules', data);
    //     localStorage,                         state.roleRouterRules
    localStorage.setItem('roleRouterRules', JSON.stringify(data));
  },
}

第3ステップログイン成功時に権限ページを移動しました（コア）
基本的な考え方:

すべてのルーティング・ジャンプは認証されます。

は、ダイナミックルーティング（すなわちデフォルトルーティング）ではなく、直接に見逃す

です。

は、動的なルーティングである（すなわち、まだ作成されていない、強制的に入ると404にリダイレクトされるが、それでもto.redictedFromでユーザが入ることを望むルートを取得することができる）。ルート権限規則データがあるかどうかを確認する。

はありません。登録ページ

に行かせます。

にあります。roleRouterRulesによって現在のキャラクターの動的なルーティング設定データを生成し、addRoutesを本当のrouterに追加します。このときlet path=to.redirected From＿pathによって。とnext(path)もう一回認証してください。

はこのユーザがこのページにアクセスする権限がないということを表していません。
注意事項：

addRoutes()の方法は1つのユーザが一回しか使えないので、ステータス値isAddRoutesをvuexに追加して、ユーザーが動的なルーティングに入るたびにアドドRoutesを確認して

を使ったことがありません。

next()メソッドはパラメータがないと直接に放します。パラメータ(例えばnext({path:'/404')があります。)が放したら再度router.beforeEachに入ります。気をつけないと死循環

です。

import vuex from './vuex';
router.beforeEach((to, from, next) => {
  let path = to.redirectedFrom || to.path;
  //       
  if (whiteList.indexOf(path) >= 0) return next();
  //    
  if (!vuex.getters.roleRouter) return next({ path: '/login' });
  if (!vuex.getters.isAddRoutes) {
    console.log('path   ,      ，        ');
    router.addRoutes(vuex.getters.roleRouter);
    vuex.dispatch('set_isAddRoutes', true);
    next(path);
  } else {
    console.log('        ，    ');
    next();
  }
});

第4ステップは、異なるキャラクターのユーザを切り替えます。
ここにピットがあります。Vue RouterはaddRoutesだけを提供していますが、削除と置換方法がありません。強い更新ブラウザでVue Routerをリセットするしかないです。まず空のlocal Strageをクリアします。更新時に初期化されたVue Routerは標準ルートしかありません。ユーザーはページを登録するしかないです。
もう一つの方法が分かりませんでした。興味があります。

exit() {
 localStorage.clear();
 window.location.reload();
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。