vue認証の書き方

Vue は、使いやすさと柔軟性を備えた人気のフロントエンド フレームワークです。 Vue アプリケーションを開発する場合、多くの場合、認証されたユーザーのみが制限されたリソースにアクセスできるようにするために、ユーザー認証および認可機能を実装する必要があります。この記事では、Vue で認証を実装する方法を紹介します。

1. 認証方法の決定

認証関数の作成を開始する前に、使用する認証方法を決定する必要があります。一般的な認証方法には、ロールベースのアクセス制御 (RBAC) と許可ベースのアクセス制御 (ABAC) があります。 RBAC は、ユーザーをロールに割り当て、各ロールに特定のアクセス許可を付与することによって、リソースへのアクセスを制御するアクセス承認ポリシーです。 ABAC は、特定のユーザーにアクセス権があるかどうかを決定するために、ユーザーとリソースの間に一連のルールを確立するアクセス承認ポリシーです。

Vue アプリケーションでは、RBAC または ABAC 認証方法を実装する具体的な手順が異なるため、アプリケーションの要件に応じて適切な方法を選択する必要があります。

2. ID 認証の実装

認証を実装する前に、ユーザー ID 認証を実装する必要があります。通常、これはログイン フォームでユーザーの資格情報を取得し、検証のためにサーバーに送信することによって行われます。認証が成功すると、ユーザーとトークンに関する ID 情報を含む応答が生成され、アプリケーションのローカル ストレージまたは Cookie に保存されます。

以下は、ユーザーがユーザー名とパスワードを入力し、検証のためにサーバーに送信するサンプル コードです:

methods: {
  login() {
    axios.post('/auth/login', {username: this.username, password: this.password})
      .then(response => {
        const {user, token} = response.data
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

3. Vue ルート ガードの作成

Vue は、「ルート ガード」と呼ばれる機能を提供します。これにより、開発者はインターセプタ関数をルートにアタッチし、ナビゲーションの開始時、ルート排他的ガード中、およびルート グローバル ガード中にこれらのインターセプタを呼び出すことができます。

Vue では、ルート ガードを使用してアクセス制御を実装し、認証されたユーザーのみが制限されたルートにアクセスできるようにすることができます。 Vue ルート ガードが承認されたルートをインターセプトするサンプル コードを次に示します。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') !== null
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ name: 'home' })
  } else {
    next()
  }
})

上記のコードでは、ユーザーが「requiresAuth」メタデータでマークされたルートにアクセスしようとすると、ルート排他的ガードとグローバル ルーティングが実行されます。ガード間でフック関数が呼び出されます。ユーザーが認証されている場合、ルートへのアクセスが許可されます。それ以外の場合は、ログイン ページにリダイレクトします。

4. RBAC および ABAC 認証の実装

RBAC 認証と ABAC 認証の実装方法は異なります。簡単に言えば、RBAC はユーザーをロールと権限に分割し、これらをすでに定義されているロールに割り当てます。 ABAC はセキュリティ ポリシーをコレクションとして確立し、アクセス要求時にこれらのポリシーを適用して、制限されたリソースにアクセスできるユーザーを決定します。

RBAC 認証を実装する場合、ユーザーのロールと権限の間のマッピングを構築し、各ユーザーにロールを割り当てる必要があります。その後、アプリケーションは、ユーザーのロールに基づいて、ユーザーが特定のリソースにアクセスする権限を持っているかどうかを判断できます。以下はサンプル コードです。

const roles = {
  admin: {
    permissions: ['user:list', 'user:create', 'user:edit']
  },
  manager: {
    permissions: ['user:list', 'user:edit']
  },
  member: {
    permissions: []
  }
}

function checkPermission(permission) {
  const user = JSON.parse(localStorage.getItem('user'))
  const userRole = user.role
  if (roles[userRole]) {
    return roles[userRole].permissions.includes(permission)
  } else {
    return false
  }
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

上記のコードでは、ロール マッピングはロール オブジェクトに保存されます。ユーザーの役割は、localStorage に保存されているユーザー情報によって決定されます。権限をチェックする実際の関数 checkPermission() は、ユーザーが指定された権限を持っているかどうかを確認します。

ABAC 認可を実装する場合、リソースに対するセキュリティ操作を実行するためにアクセスがどのように使用されるかをチェックするポリシーを作成する必要があります。属性ベースのアクセス制御 (ABAC) を例に挙げると、ABAC は、ユーザーに関連する属性 (役割、場所、所有デバイスなど) に基づいてユーザーがリソースにアクセスできるかどうかを確認する一連のルールを定義します。

以下は、Vue ルート ガードが属性を使用して ABAC ポリシーを適用するサンプル コードです:

const permissions = {
  'user:list': {
    condition: 'user.role === "admin" || user.role === "manager"'
  },
  'user:create': {
    condition: 'user.role === "admin"'
  },
  'user:edit': {
    condition: 'user.role === "admin" || (user.role === "manager" && user.department === "it")'
  }
}

const checkPermission = (permission) => {
  const user = JSON.parse(localStorage.getItem('user'))
  const rule = permissions[permission]
  return rule && eval(rule.condition)
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'home' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

上記のコードでは、各アクセス承認ルールには、ユーザーがプロパティを満たす必要があることを定義する条件属性があります。特定のリソースにアクセスします。 checkPermission() 関数は、eval() 関数を使用してルールの条件属性を解釈し、実行します。

概要

Vue アプリケーションに認証を実装するには、認証方法を決定し、ID 検証を実装し、Vue ルーティング ガードを作成し、RBAC または ABAC 認証を実装する必要があります。どの認証方法が使用される場合でも、Vue ルート ガードは認可を達成するための重要なテクノロジーです。 Vue ルート ガードを使用し、RBAC または ABAC 認証を実装すると、アクセスを簡単に承認し、アプリケーション内の制限されたリソースを保護できます。

以上がvue認証の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。