Vue3 TS Vite 開発のヒント: ユーザー権限を管理する方法

はじめに:
最新の Web アプリケーションでは、ユーザー権限管理は重要な機能です。ユーザーの役割と権限を決定することで、さまざまな機能やページへのユーザーのアクセスを制限できます。 Vue3、TypeScript、Vite を組み合わせることで、ユーザー権限をより効率的に管理できます。この記事では、Vue3 TS Vite でユーザー権限管理を実装するのに役立ついくつかの実践的なヒントとコード例を紹介します。

1. ロールと権限の定義
   ユーザー権限管理を実行する前に、まずさまざまなロールと権限を定義する必要があります。ロールには admin (管理者)、user (一般ユーザー) などがあり、権限には作成 (create)、更新 (update)、削除 (delete) などがあります。以下は、ロールと権限の定義の簡単な例です。

// roles.ts
export enum Role {
  Admin = 'admin',
  User = 'user',
}

// permissions.ts
export enum Permission {
  Create = 'create',
  Update = 'update',
  Delete = 'delete',
}

2. 権限ディレクティブの作成
   Vue コンポーネント内の特定の要素をより便利に表示または非表示にするために、カスタム ユーザー権限を確認するためのディレクティブを定義します。以下はパーミッション ディレクティブの例です。

// directives/permission.ts
import { Directive, DirectiveBinding } from 'vue'
import { Role, Permission } from '@/constants/roles'

const permissionDirective: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
  const { value } = binding
  const userRole = 'admin' // 这里假设用户角色为admin，实际开发中需要根据实际情况获取

  // 在这里检查用户权限和角色，决定是否展示元素
  if (value) {
    const [requiredRole, requiredPermission] = value.split('.')
    if (
      (requiredRole && requiredRole !== userRole) ||
      (requiredPermission && !hasPermission(userRole, requiredPermission))
    ) {
      el.style.display = 'none'
    }
  }
}

const hasPermission = (role: Role, permission: Permission): boolean => {
  // 在这里根据角色和权限检查用户是否有权限
  // 实际开发中，可以从后端接口获取用户角色和权限，并做相应的校验
  return true
}

export default permissionDirective

3. パーミッション ディレクティブの登録
   パーミッション ディレクティブをアプリケーションのエントリ ファイルに登録します。以下は例です:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import permissionDirective from '@/directives/permission'

const app = createApp(App)

app.directive('permission', permissionDirective)

app.mount('#app')

4. パーミッション ディレクティブの使用
   Vue コンポーネントでは、パーミッション ディレクティブを使用して要素の表示または非表示を制御できます。例を次に示します:

<template>
  <div>
    <h1 v-permission="`${Role.Admin}.${Permission.Create}`">仅管理员可见</h1>
    <h1 v-permission="`${Role.User}.${Permission.Update}`">仅普通用户可见</h1>
  </div>
</template>

上の例では、最初の

タグは、ユーザーの役割が管理者であり、作成権限がある場合にのみ表示されます。同様に、2 番目の

タグは、ユーザーの役割が user で、更新権限がある場合にのみ表示されます。

5. 動的ルーティング権限管理
   実際のプロジェクトでは、ユーザー権限に基づいてルートを動的に生成することが必要になることがよくあります。ルート ナビゲーション ガードでユーザーの権限を確認し、その権限に基づいてルートを動的に追加、削除、またはリダイレクトできます。以下は、動的ルーティング権限管理に Vue Router を使用する例です。

// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import { Role, Permission } from '@/constants/roles'
import { hasPermission } from '@/utils/permission'

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/Admin.vue')
    meta: {
      requiresAuth: true,
      requiredRoles: [Role.Admin],
    },
  },
  // ...
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = true // 假设用户已登录，实际开发中需要根据实际情况获取

  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    const userRole = 'admin' // 这里假设用户角色为admin，实际开发中需要根据实际情况获取

    if (to.meta.requiredRoles && !hasPermission(userRole, to.meta.requiredRoles)) {
      next('/error')
    } else {
      next()
    }
  }
})

export default router

ログイン後にコピー

上の例では、最初にユーザーがログインしているかどうかを確認します。次に、ユーザーのロールを取得し、ルートの「requiredRoles」と照合します。ユーザーの役割が要件を満たしていない場合は、エラー ページにリダイレクトされます。それ以外の場合は、要求されたルートの読み込みを続けます。

結論:
Vue3、TypeScript、Vite の強力な機能を使用すると、ユーザー権限をより効率的に管理できます。ロールと権限を定義し、権限ディレクティブを作成し、動的ルーティング権限管理を使用することで、ユーザー権限制御を簡単に実装できます。上記の例は、Vue3 TS Vite プロジェクトでのユーザー権限管理の実装に役立つことを期待しています。

以上がVue3+TS+Vite 開発スキル: ユーザー権限の管理方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。