uniapp におけるルーティング ガードの役割と使用法

uniapp におけるルート ガードの役割と使用法

1. はじめに

uniapp アプリケーションを開発する過程で、しばしばいくつかの問題に遭遇します。 require ユーザーが権限判断やページジャンプを行うシナリオ。これらの機能を実現するために、uniappではルートガード機構を提供しており、ルートガードにより、ユーザーはルーティングジャンプ前に権限の確認などを行うことができ、より柔軟で安全なアプリケーションを実現します。

2. ルーティング ガードの役割

ルーティング ガードは主に、ページのアクセス許可を制御し、グローバル インターセプト操作を実装するために使用されます。ルートがジャンプする前にいくつかのコード ロジックを実行することで、次の機能を実現できます。

1. 権限検証: ユーザーのロールや権限に基づいて、ユーザーが特定のページにアクセスする権限を持っているかどうかを判断できます。ログインステータスやその他の情報。権限がない場合は、ログインページや他のページにジャンプできます。
2. ページ記録: ユーザーが訪問したページを記録できるため、必要に応じてページを転送または取り消すことができます。
3. ルート インターセプト: ルート ジャンプの前に、ユーザー情報の取得、ネットワーク ステータスの確認など、いくつかのインターセプト操作を実行できます。

3. ルーティング ガードの使用法

uniapp のルーティング ガードには、主にグローバル ガードとローカル ガードが含まれます。

1. グローバル ガード

グローバル ガードは、プロジェクトのルート ディレクトリにある main.js ファイル内の設定を参照し、すべてのルートに有効になります。グローバル ガードでは、ログイン チェック、ページ アクセス許可の検証など、いくつかのグローバル操作を実行できます。

main.js ファイルでは、uni-app が提供する beforeEach メソッドと afterEach メソッドを使用してグローバル ガードを定義できます。

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

Vue.config.productionTip = false

// 全局前置守卫
uni.$beforeEach((to, from, next) => {
  // 在这里进行权限验证或者其他操作
  next() // 调用next()方法才能进行跳转
})

// 全局后置守卫
uni.$afterEach((to, from) => {
  // 在这里进行一些全局操作
})

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

2. ローカル ガード

# #部分ガードは特定のページ ファイル内の設定を指し、現在のページでのみ有効になります。ページ ファイルのライフ サイクル フック関数でローカル ガードを定義できます。

たとえば、ページ ファイルにローカル ガードを定義するには、ページの vue インスタンスの作成されたライフ サイクル フック関数にロジックを追加できます:

export default {
  created() {
    // 在这里添加局部守卫的逻辑
  }
}

4. コード例ルーティング ガード

以下は、uniapp のルーティング ガードを使用して権限判定とページ ジャンプを行う例です。

グローバル ガード コードの例:

1. uni.$beforeEach((to, from, next) => {
     // 判断用户是否已登录
     if (to.path !== '/login' && !uni.getStorageSync('token')) {
       // 如果用户未登录，则跳转到登录页面
       next('/login')
     } else {
       // 用户已登录，可以继续访问目标页面
       next()
     }
   })

ローカル ガード コードの例:

2. export default {
     created() {
       // 判断用户是否有访问当前页面的权限
       if (!this.$store.state.user.isAdmin) {
         // 如果用户不是管理员，则跳转到首页
         uni.redirectTo({
           url: '/pages/index/index'
         })
       }
     }
   }

上記の例を通じて、次のことができます。ご覧のとおり、ルート ガードは、ページ アクセス許可を制御し、グローバル インターセプト操作を実装するための便利で柔軟な方法を uniapp に提供します。実際のプロジェクトでは、特定のニーズに応じてルーティング ガードを構成して、アプリケーションのセキュリティとユーザー エクスペリエンスをより確実に確保できます。

概要:

この記事では、uniapp におけるルーティング ガードの役割と使用法を紹介し、具体的なコード例を示します。ルート ガードを使用すると、ユーザー権限の検証、ページ アクセス制御、その他のグローバル操作を実装できるため、アプリケーションのセキュリティとユーザー エクスペリエンスが向上します。この記事が、uniapp のルート ガード メカニズムをより効果的に使用するのに役立つことを願っています。

以上がuniapp におけるルーティング ガードの役割と使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。