Comment uniapp détermine-t-il si la connexion de l'utilisateur a expiré ?

Dans le développement d'applications mobiles, la connexion et la vérification des utilisateurs sont des tâches cruciales. Elles garantissent la sécurité et l'expérience utilisateur de l'application. Lorsque nous utilisons Uniapp pour le développement, nous devons accorder une attention particulière aux problèmes de connexion des utilisateurs. Cet article expliquera comment déterminer si la connexion utilisateur dans Uniapp a expiré et donnera des exemples de code pertinents.

1. Qu'est-ce que l'expiration de la connexion utilisateur ?

L'expiration de la connexion utilisateur fait référence à la situation dans laquelle l'utilisateur n'a effectué aucune opération dans un certain laps de temps et les informations de connexion sont recyclées par le serveur. Il s'agit d'une mesure prise par le système pour assurer la sécurité des comptes d'utilisateurs. Dans Uniapp, le problème de l'expiration des connexions utilisateur doit également être résolu, sinon l'utilisateur ne pourra pas continuer à utiliser l'application.

2. Solution à l'expiration de la connexion utilisateur dans Uniapp

Dans Uniapp, vous pouvez utiliser l'intercepteur de requête et l'intercepteur de réponse pour résoudre le problème de l'expiration de la connexion utilisateur. Plus précisément, vous pouvez ajouter un jeton dans l'intercepteur de requêtes pour vérifier les informations d'identité de l'utilisateur et déterminer si le jeton a expiré dans l'intercepteur de réponse.

1. Intercepteur de requête

L'intercepteur de requête peut obtenir le jeton avant d'envoyer la demande et ajouter le jeton à l'en-tête. De cette manière, lors des requêtes ultérieures, le serveur peut vérifier les informations d'identité de l'utilisateur via le Token.

En prenant Axios comme exemple, vous pouvez ajouter le code suivant à l'intercepteur de requête :

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

2. Intercepteur de réponse

L'intercepteur de réponse peut vérifier le jeton après que le serveur a renvoyé le résultat. Si le jeton expire, vous devez vous reconnecter et accéder à la page de connexion.

En prenant Axios comme exemple, vous pouvez ajouter le code suivant à l'intercepteur de réponse :

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

Dans cet exemple, l'intercepteur de réponse déterminera le code du résultat renvoyé S'il est 401, il passera à la page de connexion. .

3. Traitement automatisé de l'expiration des connexions utilisateur

En plus d'ajouter manuellement un jeton, vous pouvez également gérer automatiquement le problème de l'expiration des connexions utilisateur grâce à certaines fonctions fournies par le framework Uniapp.

1. Utilisez vuex

Vuex est un outil de gestion d'état qui peut facilement stocker et récupérer des données dans votre application. Dans Uniapp, le statut de connexion de l'utilisateur peut être enregistré via Vuex. De cette façon, lorsque le statut d'utilisateur doit être obtenu, il peut être obtenu directement depuis 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: {}
})

Dans cet exemple, grâce à l'outil de gestion d'état de Vuex, les deux états isLogin et user peuvent être enregistrés pour faciliter les appels ailleurs.

2. Plug-ins développés à l'aide d'Uni-app

Uni-app, en tant que framework multiplateforme, fournit de nombreux plug-ins de développement dont nous avons besoin. Parmi eux, il existe un plug-in vuex-persistedstate très utile, qui peut enregistrer les données Vuex dans le stockage local.

import createPersistedState from 'vuex-persistedstate'

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

Dans cet exemple, l'état Vuex peut être enregistré dans le stockage local via le plugin vuex-persistedstate. De cette façon, lorsque l'utilisateur rouvre l'application, les données sont toujours conservées.

4. Résumé

Dans Uniapp, l'expiration des connexions des utilisateurs est un problème très courant. En utilisant les méthodes d'intercepteur de requête et d'intercepteur de réponse, ainsi que la prise en charge des plug-ins Vuex et vuex-persistedstate, nous pouvons facilement résoudre le problème de l'expiration des connexions utilisateur. Dans le même temps, résoudre ce problème peut également améliorer la sécurité et l’expérience utilisateur de l’application, il doit donc être pris au sérieux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!