ルートインターセプターを使用してuniappでログイン検証とページジャンプを実装する方法

ルーティング インターセプタを使用して uniapp でログイン検証とページ ジャンプを実装する方法

モバイル インターネットの発展に伴い、モバイル アプリケーションとして開発されるアプリケーションがますます増えています。 Uni-app は、開発者が一連のコードを使用して複数のプラットフォーム上でアプリケーションを構築できるようにする Vue ベースの開発フレームワークです。モバイル アプリケーションでは、ログイン検証とページ ジャンプが一般的な要件です。この記事では、Uni-app でルート インターセプターを使用してこの機能を実装する方法と、具体的なコード例を紹介します。

1. ルート インターセプターの追加
   Uni-app では、ルート インターセプターを使用して、ルート ジャンプの前にログイン検証などの一部の操作を実行できます。まず、新しく作成した main.js ファイル内の uni-simple-router ライブラリを参照し、Vue.use メソッドを使用して登録する必要があります。 Vue プラグインとして使用します。サンプル コードは次のとおりです。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import uniRouter from 'uni-simple-router'

Vue.use(uniRouter, {
  routes: router
})

2. ログイン検証
   ログイン検証を実装するには、ユーザーがルーティング インターセプターにログインしているかどうかを判断する必要があります。ユーザーがログインしていない場合は、ログイン ページにジャンプします。 router.js ファイル内のルートの meta フィールドを定義して、ログイン検証が必要なルートを識別できます。サンプル コードは次のとおりです。

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: { requireAuth: true } // 需要进行登录校验
  }
]

3. ルーティング インターセプターの作成
   ルーティング インターセプターでは、beforeEach メソッドを使用してログイン検証とページングを実行できます。ジャンプ操作。サンプル コードは次のとおりです。

uniRouter.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断是否需要登录校验
    const token = uni.getStorageSync('token') // 获取本地存储的token
    if (token) {
      next()
    } else {
      next('/login') // 跳转到登录页面
    }
  } else {
    next()
  }
})

上記のコードでは、uni.getStorageSync メソッドを使用して、ローカルに保存されたトークンを取得します。トークンが存在する場合、ユーザーがログインし、後続の操作を実行し続けていることを意味します。トークンが存在しない場合は、ユーザーがログインしていないことを意味するため、ログイン ページにジャンプします。

4. ページ ジャンプ
   ログイン検証が必要なページ コンポーネントでは、this.$router.push メソッドを使用してページにジャンプできます。サンプル コードは次のとおりです。

methods: {
  goToProfile() {
    this.$router.push('/profile')
  }
}

上記は、ルーティング インターセプターを使用して Uni-app でログイン検証とページ ジャンプを実装するための具体的な手順とコード例です。ルート インターセプターを合理的に使用することで、アプリケーションの動作をより適切に制御し、ユーザー エクスペリエンスとセキュリティを向上させることができます。この記事が、Uni-アプリ開発で遭遇する問題の解決に役立つことを願っています。

以上がルートインターセプターを使用してuniappでログイン検証とページジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。