vue-router は権限制御メソッドを実装します-jsチュートリアル-php.cn

vue-router は権限制御メソッドを実装します

小云云

リリース： 2018-02-03 14:48:22

オリジナル

2319 人が閲覧しました

この記事では主に vue-router パーミッション制御のサンプルコードを紹介しますが、編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

会社のバックエンド管理システムは最近構築されたもので、システムは比較的大規模ですが、次の点を達成する必要があります:

メニュー権限、異なる権限に従って異なるメニューを表示する
操作権限など。、一部のアカウントには新しい増加権限がなく、一部には変更または削除権限がありません
統計概要などのデータ権限、通常の管理者は会社の事業概要を見ることはできませんが、自分の地域の概要を見ることができます
リスト、操作などの表示権限その欄で約定金額は見れますが、マーケットでは約定金額欄が見れません今のところまだ構築中で、メニュー権限と操作権限は解決済みです。

メニュー権限:

最初に、上記の方法に従い、最初にルートのセットをローカルで構成し、ログインに成功すると、メニューリストがサーバーから返され、次に返されるメニューが返されます。ローカルに設定されたルートをリストして比較し、ルートが存在する場合は、それらにアクセスする権限を持っています。数日間作業した結果、ルートの完全なセットをローカルで設定する必要があり、アクセス許可を割り当てるためにサーバーにルーティング情報を書き込むためにいくつかのページを作成する必要があることがわかりました。私たちのもののように、多数の権限メニューがある場合、このバックエンドには、エージェント、販売者の権限などだけでなく、社内の権限のセットがいくつかあります。そのような構成は、数百以上ある可能性があり、非常に面倒です。エラーを起こしやすい。

最後の解決策は、ローカルでルーティング設定をまったく行わないことです。ログインが成功した後、メニューリストはバックグラウンドでキャプチャされるため、ログインページは別個に作成され、vue コンポーネントには配置されません。成功したので、キャプチャはまったく新しいメニューを持っているだけです。正常にフェッチした後、それをルートに構成し、vue をインスタンス化します。これにより、ルートのセットをローカルで構成する必要がなくなり、ルート全体がサーバー上で構成されます。

この方法で解決できる問題は 1 つだけです。つまり、ルーティングには対応するコンポーネントが必要なので、サーバーから返されるメニューリストには、コンポーネント名を設定するフィールドが存在します。フェッチが成功した後、ルーティング設定を生成するときに、router[menuName] を使用してこのコンポーネントに直接ロードするだけです。これは非常に便利です。代Main.jsのコードフラグメント:

// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: &#39;#app&#39;,
  store,
  router,
  nprogress,
  ...App
 });
};

ログイン後にコピー

ComponentConfigs.jsのコードフラグメント:

export default {
 Common: {
  Admin: require(&#39;../../vue/pages/common/Admin&#39;),
  Index: require(&#39;../../vue/pages/common/Index&#39;),
  UpdatePassword: r => require.ensure([], () => r(require(&#39;../../vue/pages/users/UpdatePassword&#39;)), &#39;users&#39;)
 }
}

ログイン後にコピー

サーバーが返すメニューJSON:

このうち、METAフィールドの現在のルートでの操作権限

[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

ログイン後にコピー

操作権限については、次のようになります。認証 vue プラグインを作成し、すべての操作をメソッドに独立して配置し、すべての中で認証関数を呼び出します。操作 @click, $ auth('add', arg1, arg2, ...argN); $auth は、this.$route.meta にこの操作を実行する権限があるかどうかを判断します。そうである場合は、this[authName].apply(null) を呼び出します。 , arg);