Vue で権限制御とルーティング ガードを実装するにはどうすればよいですか?

Vue で権限制御とルーティング ガードを実装するにはどうすればよいですか?

Vue は、優れたフロントエンド フレームワークとして、アプリケーションの構築に役立つ多くの便利な機能を提供します。中でもルーティングと権限制御は欠かせない部分です。開発では、特定のユーザーまたは権限のみが表示されるようにページを制限する必要があることがよくあります。このとき、Vue のルーティング ガード機能と許可制御機能が役に立ちます。

1. 権限制御

Vue は、ルーティング設定のメタ属性を通じて権限制御を実装します。これを行うことができます:

1. ルーティング メタ属性の追加

ルートのメタ属性にアクセス許可制御を追加して、ページにアクセスするアクセス許可があるかどうかを判断できます。

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true
  }
}

2. ルーティング ガードの作成

Vue はルーティング ガードを使用してページを不正アクセスから保護します。フック関数 beforeEnter をルートに追加して、ページに入る前にアクセス許可があるかどうかを判断できます。

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      beforeEnter: (to, from, next) => {
        if (!store.getters.isLoggedIn) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
})

store.getters.isLoggedIn は Vuex で定義されたゲッター関数であり、ユーザーがログインしたかどうかを判断する役割を果たします。

2. ルート ガード

Vue のルート ガードを使用して、ルートがジャンプしたときにユーザーをインターセプトし、ユーザーのアクセスを処理します。

1. グローバル ルート ガード

グローバル ルート ガードは、ルートがジャンプしたときにトリガーされ、ログイン ステータスやユーザー情報などのグローバル データの処理に使用できます。

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2. ルート排他的ガード

ルート排他的ガードは現在のルーティング設定に設定されており、特定のルートを個別に遮断できます。

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    // 判断用户权限
    if (store.getters.getPermission === ‘admin’) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  }
}

beforeEnter フック関数でユーザー権限が十分であるかどうかを確認し、十分でない場合はログイン ページにジャンプします。

概要

Vue でのアクセス許可制御とルーティング ガードの実装は、非常に便利なプロセスです。ルートのメタ属性を設定し、ルート ガードを使用することで、ユーザーのログイン ステータスと権限に基づいてページへのアクセスを制御できます。これにより、アプリケーションのセキュリティが確保されるだけでなく、ユーザー エクスペリエンスも向上します。

以上がVue で権限制御とルーティング ガードを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。