uniapp におけるルーティングガードの役割と使用法-uni-app-php.cn

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

WBOY

リリース： 2023-12-17 11:09:04

オリジナル

2444 人が閲覧しました

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

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

1. はじめに

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

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

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

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

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

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

グローバルガード

グローバルガードは、プロジェクトのルートディレクトリにある 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()

ログイン後にコピー

ローカルガード

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

ログイン後にコピー

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