ルート ナビゲーション ガードを使用して、uniapp で許可制御とルート インターセプトを実装する方法

ルート ナビゲーション ガードを使用して uniapp で権限制御とルート インターセプトを実装する方法

uniapp プロジェクトを開発するとき、特定のルートやルートに対する権限を制御する必要があることがよくあります。傍受要件。この目標を達成するには、uniapp が提供するルート ナビゲーション ガード機能を利用できます。この記事では、ルート ナビゲーション ガードを使用して uniapp に権限制御とルート インターセプトを実装する方法を紹介し、対応するコード例を示します。

1. ルーティング ナビゲーション ガードの構成

まず、uniapp プロジェクトの main.js ファイルでルーティング ナビゲーション ガードを構成します。 VueRouter の beforeEach メソッドを通じて、各ルーティング スイッチの前にカスタム コードを実行できます。

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'

router.beforeEach((to, from, next) => {
  // 在这里编写权限控制和路由拦截的逻辑
  next()
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2. 権限制御の実装

beforeEach メソッドでは、ユーザーのロールまたは権限に基づいてルートへのアクセスを許可するかどうかを決定できます。 。次に、2 つのルートがあると仮定した簡単な例を示します。/home はホームページを表し、/admin は管理者ページを表します。 /admin ルートにアクセスできるのは管理者のみです。

router.beforeEach((to, from, next) => {
  // 获取用户角色或权限
  const userRole = getUserRole()
  
  // 判断是否是管理员页面，并且用户角色不是管理员
  if (to.path === '/admin' && userRole !== 'admin') {
    // 跳转到其他页面，比如登录页面
    next('/login') 
  } else {
    next()
  }
})

3. ルート インターセプトの実装

権限制御に加えて、特定のルートをインターセプトする必要がある場合があります。たとえば、ユーザーが支払いが必要なページにアクセスしたとき、beforeEach メソッドでユーザーが支払いを行っているかどうかを確認し、支払いを行っていない場合は支払いページにジャンプします。

router.beforeEach((to, from, next) => {
  // 判断是否是付费页面，并且用户未付费
  if (to.meta.requiresPayment && !hasPaid()) {
    // 跳转到付费页面
    next('/payment') 
  } else {
    next()
  }
})

4. ルーティング設定にメタ情報を追加する

権限制御とルート インターセプトの実装を容易にするために、必要なルートにいくつかのカスタマイズを追加できます。メタ情報は、ルートが許可制御またはインターセプトを必要とするかどうかを識別するために使用されます。

// router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home'),
      meta: {
        requiresAuth: true, // 需要登录权限
        requiresPayment: true // 需要付费
      }
    },
    {
      path: '/admin',
      component: () => import('@/views/Admin'),
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 需要管理员权限
      }
    }
  ]
})

export default router

5. ルーティング切り替え時にカスタム ロジックを実行する

ユーザーがアクセス許可制御またはインターセプトを必要とするルートにアクセスすると、beforeEach メソッドは対応するカスタム ロジックを選択し、ルーティングの切り替えを続行するかどうかを決定します。ルート切り替えを中断する必要がある場合は、beforeEach メソッドで next(false) を呼び出してルート ジャンプをキャンセルできます。

router.beforeEach((to, from, next) => {
  // 判断是否需要登录权限，如果需要且用户未登录，则跳转到登录页面
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login') 
  } else {
    next() // 继续路由切换
  }
})

まとめると、uniappが提供するルートナビガード機能を利用することで、許可制御とルート傍受の機能を簡単に実現できます。 beforeEach メソッドでは、ユーザーの役割、支払いステータスなどを判断し、特定のルートへのアクセスを許可するかどうかを決定するカスタム ロジックを作成できます。この方法は柔軟性と信頼性の両方を兼ね備えており、ほとんどの uniapp プロジェクトにおける権限制御とルート インターセプトのニーズに適しています。

この記事の内容がお役に立てば幸いです。ご質問やサポートが必要な場合はお気軽にお問い合わせください。

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