uniapp はユーザーのログインの有効期限が切れているかどうかをどのように判断しますか?

モバイル アプリケーション開発では、ユーザー ログインとユーザー認証は重要なタスクであり、アプリケーションのセキュリティとユーザー エクスペリエンスを確保します。開発に Uniapp を使用する場合、ユーザーのログインの問題に特別な注意を払う必要があります。この記事では、Uniapp でのユーザー ログインの有効期限が切れているかどうかを確認する方法と、関連するコード例を紹介します。

1. ユーザー ログインの有効期限とは

ユーザー ログインの有効期限とは、ユーザーが一定期間内に操作を実行せず、ログイン資格情報がサーバーによってリサイクルされる状況を指します。これは、ユーザー アカウントのセキュリティを確保するためにシステムが講じる措置です。 Uniapp では、ユーザーのログイン有効期限の問題も解決する必要があります。解決しないと、ユーザーはアプリケーションを使い続けることができなくなります。

2. Uniapp のユーザー ログイン有効期限の解決策

Uniapp では、リクエスト インターセプター メソッドとレスポンス インターセプター メソッドを使用して、ユーザー ログインの有効期限の問題を解決できます。具体的には、リクエスト インターセプターにトークンを追加してユーザーの ID 情報を確認し、レスポンス インターセプターでトークンの有効期限が切れているかどうかを判断できます。

1. リクエスト インターセプター

リクエスト インターセプターは、リクエストを送信する前にトークンを取得し、そのトークンをヘッダーに追加できます。このようにして、後続のリクエストで、サーバーはトークンを通じてユーザーの ID 情報を検証できます。

Axios を例として、次のコードをリクエスト インターセプターに追加できます。

axios.interceptor.request.use(config => {
  // 从本地Storage获取Token
  const token = uni.getStorageSync('token')
  // 在Header中添加Token
  if (token) {
    config.headers.common['Authorization'] = token
  }
  return config
})

2. レスポンス インターセプター

レスポンス インターセプターを返すことができます。結果後、サーバーによってトークンが検証されます。トークンの有効期限が切れた場合は、再度ログインしてログイン ページに移動する必要があります。

Axios を例に挙げると、次のコードをレスポンス インターセプターに追加できます。

axios.interceptor.response.use(response => {
  if (response.data.code === 401) {
    // Token过期，需要重新登录
    uni.showToast({
      title: '登录过期，请重新登录',
      icon: 'none'
    })
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
  return response
})

この例では、レスポンス インターセプターは返された結果のコードを判断します。 401、ジャンプ ログインページに移動します。

3. ユーザー ログイン有効期限の自動処理

手動でトークンを追加するだけでなく、Uniapp フレームワークが提供するいくつかの機能を使用して、ユーザー ログイン有効期限の問題を自動的に処理することもできます。

1. vuex の使用

Vuex は、アプリケーション内のデータを簡単に保存および取得できる状態管理ツールです。 Uniapp では、Vuex を通じてユーザーのログイン状態を保存できます。このようにして、ユーザー ステータスを取得する必要がある場合、Vuex から直接取得できます。

const store = new Vuex.Store({
  state: {
    isLogin: false,
    user: {}
  },
  mutations: {
    login(state, user) {
      state.isLogin = true
      state.user = user
    },
    logout(state) {
      state.isLogin = false
      state.user = {}
    }
  },
  actions: {},
  modules: {},
  getters: {}
})

この例では、Vuex の状態管理ツールを使用して、isLogin と user の 2 つの状態を保存し、他の場所で簡単に呼び出すことができます。

2. Uni-app を使用して開発されたプラグイン

Uni-app は、クロスプラットフォーム フレームワークとして、必要な開発プラグインを多数提供します。その中には、Vuex データをローカル ストレージに保存できる非常に便利な vuex-persistedstate プラグインがあります。

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: uni.getStorageSync('vuex')
    })
  ]
})

この例では、vuex 状態は vuex-persistedstate プラグインを通じてローカル ストレージに保存できます。こうすることで、ユーザーがアプリを再度開いたときに、データが引き続き保持されます。

4. 概要

Uniapp では、ユーザーのログイン期限切れは非常に一般的な問題です。リクエスト インターセプター メソッドとレスポンス インターセプター メソッド、および Vuex プラグインと vuex-persistedstate プラグインのサポートを使用することにより、ユーザー ログインの有効期限の問題を簡単に解決できます。同時に、この問題を解決することでアプリケーションのセキュリティとユーザー エクスペリエンスも向上する可能性があるため、真剣に取り組む必要があります。

以上がuniapp はユーザーのログインの有効期限が切れているかどうかをどのように判断しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。