ホームページ > 記事 > ウェブフロントエンド > ルートインターセプターを使用してuniappでログイン検証とページジャンプを実装する方法
ルーティング インターセプタを使用して uniapp でログイン検証とページ ジャンプを実装する方法
モバイル インターネットの発展に伴い、モバイル アプリケーションとして開発されるアプリケーションがますます増えています。 Uni-app は、開発者が一連のコードを使用して複数のプラットフォーム上でアプリケーションを構築できるようにする Vue ベースの開発フレームワークです。モバイル アプリケーションでは、ログイン検証とページ ジャンプが一般的な要件です。この記事では、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 })
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 } // 需要进行登录校验 } ]
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
メソッドを使用して、ローカルに保存されたトークンを取得します。トークンが存在する場合、ユーザーがログインし、後続の操作を実行し続けていることを意味します。トークンが存在しない場合は、ユーザーがログインしていないことを意味するため、ログイン ページにジャンプします。
this.$router.push
メソッドを使用してページにジャンプできます。サンプル コードは次のとおりです。 methods: { goToProfile() { this.$router.push('/profile') } }
上記は、ルーティング インターセプターを使用して Uni-app でログイン検証とページ ジャンプを実装するための具体的な手順とコード例です。ルート インターセプターを合理的に使用することで、アプリケーションの動作をより適切に制御し、ユーザー エクスペリエンスとセキュリティを向上させることができます。この記事が、Uni-アプリ開発で遭遇する問題の解決に役立つことを願っています。
以上がルートインターセプターを使用してuniappでログイン検証とページジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。