Vue プロジェクトのアクセス制御リストと権限管理-Vue.js-php.cn

Vue プロジェクトのアクセス制御リストと権限管理

王林

リリース： 2023-06-10 16:45:31

オリジナル

930 人が閲覧しました

フロントエンドテクノロジの継続的な開発に伴い、Vue は新しいタイプのフロントエンドフレームワークとして、多くのプロジェクトで広く使用されています。ただし、ほとんどの実際のアプリケーションシナリオでは、ユーザーアクセス制御は非常に重要なタスクです。したがって、この記事では、Vue プロジェクトでアクセス制御リスト (ACL) と権限管理を実装するテクノロジーに焦点を当てます。

アクセス制御リストとは何ですか?

アクセス制御リスト (ACL) は、さまざまなシステムリソース (ファイル、ディレクトリ、ネットワーク接続など) へのアクセスを制限するために使用されるユーザーまたはユーザーグループのリストを指します。 Vue プロジェクトでは、通常、ACL を使用して、さまざまなユーザーロールのアクセス権をさまざまなページまたはページ内の特定の機能モジュールに制限します。

アクセス制御リストを実装するにはどうすればよいですか?

Vue プロジェクトでは、Vue Router の Navigation Guards 機能を使用して ACL を実装できます。ナビゲーションガードは、開発者がルーティングナビゲーションをインターセプトし、それによってナビゲーションを制御できるようにする Vue Router によって提供されるメカニズムです。以下に例を示します。

router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('userRole');
  if (!role && to.path !== '/login') {
    next('/login');
  } else if (to.meta.permission && !to.meta.permission.includes(role)) {
    next('/403');
  } else {
    next();
  }
});

ログイン後にコピー

このコードでは、beforeEach メソッドを使用してグローバルナビゲーションガードを登録します。このナビゲーションガードは、ユーザーがページ間を移動するたびにトリガーされます。 localStorage を使用して現在のユーザーのロールを取得し、ユーザーがページにアクセスする権限を持っているかどうかを判断できます。ユーザーがログインしていない場合は、ログインページにジャンプします。ユーザーがログインしていてもページにアクセスする権限がない場合は、403 ページにジャンプします。それ以外の場合は、ユーザーにページへのアクセスを継続させます。

ルーティング設定の meta フィールドを使用して、各ルートに対応する許可要件を設定できることに注意してください。たとえば、

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    permission: ['admin', 'editor']
  }
}

ログイン後にコピー

この例では、 Dashboard ページには、admin と editor の 2 つのロールを持つユーザーのみがアクセスできるように構成しました。

権限管理とは何ですか?

アクセス制御リストに加えて、ユーザーの役割と権限を管理する便利なツールも必要です。したがって、権限管理ツールが必要です。 Vue プロジェクトでは、Vue-Access-Control や Vue-Auth などの既存の権限管理ツールを使用できます。

ここでは、Vue-Access-Control ツールを例として、このツールを権限管理に使用する方法を簡単に紹介します。まず、Vue-Access-Control をインストールする必要があります:

npm install vue-access-control --save

ログイン後にコピー

次に、Vue プロジェクトのエントリファイルで構成します:

import VueAccessControl from 'vue-access-control';

Vue.use(VueAccessControl, {
  roles: ['admin', 'editor'],
  defaultRole: 'editor'
});

Vue.accessControl.setAlias('isAdmin', 'admin');
Vue.accessControl.setAlias('isEditor', 'editor');

ログイン後にコピー

ここで、最初に渡しますVue.use Vue-Access-Control プラグインを使用したいことを Vue に知らせます。次に、構成内で admin と editor という 2 つのロールを定義しました。また、setAlias メソッドを通じてロールのエイリアスも定義します。これにより、コード内でロールを簡単に使用できるようになります。

最後に、ページで v-if ディレクティブと can メソッドを使用して権限を制御できます。

<template>
  <div>
    <h2 v-if="can('isAdmin')">
      增加管理员
    </h2>
    <button v-if="can('isEditor')" @click="edit">编辑文章</button>
  </div>
</template>

ログイン後にコピー

この例ではでは、v-if ディレクティブを使用して現在のユーザーが対応する権限を持っているかどうかを判断し、can メソッドを使用して判断します。ユーザーが権限を持っている場合は、対応する要素が表示されますが、権限がない場合、要素は表示されません。

要約すると、Vue プロジェクトにアクセス制御リストと権限管理を実装するのは難しくありません。 Vue Router のナビゲーションガードを使用して ACL を実装し、Vue-Access-Control などの既存の権限管理ツールと組み合わせて、権限管理のニーズを満たすことができます。このようにして、安全で信頼性の高い環境での開発と展開を保証できます。

以上がVue プロジェクトのアクセス制御リストと権限管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。