ルートインターセプターを使用してuniappで権限制御を実装する方法

Uniapp は、ルート インターセプターを使用して権限制御を実装する方法を実装します。

モバイル アプリケーションを開発する場合、多くの場合、ユーザーがそのアプリケーションにのみアクセスできるようにするために、ユーザー権限制御を実装する必要があります。許可されたページ。 Uniapp では、ルート インターセプターを使用してこれを実現できます。

ルートインターセプターとは、ルートジャンプを行う前にインターセプトを行う機能で、許可判定やジャンプ制御を行うことができます。以下では、ルート インターセプターを使用してアクセス許可制御を実装する方法の手順を詳しく紹介し、具体的なコード例を示します。

ステップ 1: ルート インターセプターを定義する

まず、main.js でルート インターセプターを定義する必要があります。ルーティング インターセプターは、to (ジャンプするページのルーティング オブジェクト)、from (現在のページのルーティング オブジェクト)、および next (ジャンプ動作の制御に使用される関数) の 3 つのパラメーターを受け取る関数です。

// main.js

router.beforeEach((to, from, next) => {
  // 在这里进行权限判断和跳转控制
  // ...
  next(); // 必须调用next函数，表示继续跳转
})

ステップ 2: パーミッション判定ロジックを実装する

ルーティング インターセプタでパーミッション判定ロジックを実行するにはさまざまな方法がありますが、参考として一般的に使用される 2 つの方法を以下に示します。

方法 1: ユーザー ロールに基づく権限の判断

一般的な権限の判断方法は、ユーザー ロールの判断に基づいています。ユーザーが正常にログインしたら、ユーザーのロール情報をグローバル データ オブジェクトに保存し、ルーティング インターセプターを使用して、ユーザーがユーザーのロールに基づいて特定のページにアクセスする権限を持っているかどうかを判断できます。

サンプルコード:

// main.js

router.beforeEach((to, from, next) => {
  // 获取用户角色信息
  const userRole = uni.getStorageSync('userRole');
  
  // 根据用户角色判断是否有权限访问页面
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    uni.showToast({
      title: '无权限访问',
      icon: 'none'
    });
    return;
  }
  
  next(); // 继续跳转
})

方法 2: ユーザー権限リストに基づく権限判断

もう 1 つの一般的な権限判断方法は、ユーザー権限リストに基づくものです。ユーザーが正常にログインした後、ユーザーの権限リストを取得し、それをグローバル データ オブジェクトに保存できます。次に、ルート インターセプターで、ユーザーが特定のページにアクセスする権限を持っているかどうかを判断します。

サンプル コード:

// main.js

router.beforeEach((to, from, next) => {
  // 获取用户权限列表
  const userPermissions = uni.getStorageSync('userPermissions');
  
  // 判断用户是否有权限访问页面
  if (to.meta.permissions && !to.meta.permissions.some(permission => userPermissions.includes(permission))) {
    uni.showToast({
      title: '无权限访问',
      icon: 'none'
    });
    return;
  }
  
  next(); // 继续跳转
})

ステップ 3: ページの権限要件を構成する

最後のステップは、ページのルーティング構成で権限要件を設定することです。ページの meta フィールドに roles または permissions 属性を設定することで、ページに必要なロールまたは権限を指定できます。

サンプル コード:

// router.js

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      roles: ['admin']
    }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: {
      permissions: ['user:list']
    }
  },
]

上記のコードは、/home ページが /user# にアクセスするには admin ロールが必要であることを示しています。 ## ページにアクセスするには user:list 権限が必要です。

上記の手順により、Uniapp でルート インターセプターの権限制御を実装できます。ユーザーが許可が必要なページにアクセスしようとすると、ルートインターセプタ内の許可判定ロジックがシステムによって自動的に実行され、判定結果に基づいてジャンプするかどうかが決定されます。

上記の内容がお役に立てば幸いです。特定の実装は、プロジェクトのニーズに応じてカスタマイズおよび調整することもできます。コーディングを楽しんでください!

以上がルートインターセプターを使用してuniappで権限制御を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。