Une fois qu'Uniapp s'est connecté avec succès, accédez à d'autres pages et actualisez

Avec le développement d'Internet, le développement mobile est devenu de plus en plus important. Sur cette base, Uniapp a émergé au fur et à mesure que les temps l'exigent et est devenu aujourd'hui un cadre de développement mobile multiplateforme populaire. Dans Uniapp, la connexion est une fonction très courante et le problème d'actualisation est également un problème qui doit être pris en compte pendant le processus de développement. Cet article présentera en détail comment accéder à d'autres pages pour actualiser après une connexion réussie à uniapp.

1. Connaissances préalables

Avant de commencer l'introduction, nous devons introduire quelques connaissances préalables dans uniapp.

1. Routage

Le routage dans uniapp est implémenté par les méthodes uni.navigateTo et uni.redirectTo intégrées à uni-app. Parmi eux, uni.navigateTo est utilisé pour passer à la page suivante et peut revenir à la page précédente ; uni.redirectTo est utilisé pour rediriger vers la page suivante et ne peut pas revenir à la page précédente ;

De plus, uniapp dispose également d'uni.reLaunch pour fermer toutes les pages et ouvrir la page actuelle, uni.switchTab pour accéder à la page tabBar et uni.navigateBack pour revenir à la page précédente.

2.vue.js framework

uniapp est implémenté sur la base du framework vue.js, vous devez donc maîtriser la syntaxe de base et les fonctions pertinentes de vue.js pendant le processus de développement, tels que le développement de composants, la gestion de l'état, la vie cycles, etc

3. Demande asynchrone

Lors de la mise en œuvre de la fonction de connexion, une demande doit être envoyée en arrière-plan pour vérifier l'exactitude des informations de connexion de l'utilisateur. Par conséquent, vous devez maîtriser les connaissances pertinentes sur les requêtes asynchrones uni.request.

4. Stockage local

Dans uniapp, vous pouvez utiliser uni.setStorageSync et uni.getStorageSync pour stocker et lire des données locales. Le stockage local permet de partager des données sur plusieurs pages et permet un stockage persistant des données.

2. Introduction à la solution

Dans le processus de passage à d'autres pages pour actualiser après une connexion réussie, nous devons effectuer les deux tâches suivantes :

1 Enregistrer les informations sur l'état de connexion de l'utilisateur

2. Informations sur l'état et nouveau rendu de la page

Nous détaillerons ensuite comment réaliser ces deux tâches.

1. Enregistrer les informations sur l'état de connexion de l'utilisateur

Une fois que l'utilisateur s'est connecté avec succès, nous devons enregistrer les informations sur l'état de connexion de l'utilisateur. Le plan de mise en œuvre est le suivant :

Étape 1 : Dans la fonction de rappel d'une connexion réussie, envoyez une demande en arrière-plan pour obtenir les informations sur l'état de connexion de l'utilisateur et enregistrez-les localement.

uni.request({
  url: 'http://www.example.com/login',
  data: {
    username: 'username',
    password: 'password'
  },
  success: (res) => {
    if(res.statusCode !== 200) {
      uni.showModal({
        content: '登录失败，请检查用户名和密码是否正确'
      })
    } else {
      // 保存用户登录状态信息
      uni.setStorageSync('isLogin', true)
      //跳转到其他页面
      uni.navigateTo({
        url: '/pages/other/other'
      })
    }
  }
})

Dans la fonction de rappel d'une connexion réussie, nous envoyons une demande de connexion en arrière-plan si la demande réussit, nous enregistrons localement les informations sur l'état de connexion de l'utilisateur. Dans cet exemple, nous définissons le nom de clé des informations d'état de connexion de l'utilisateur sur isLogin et sa valeur est true.

2. Déterminer si l'utilisateur s'est connecté et afficher à nouveau la page sur d'autres pages

Une fois que l'utilisateur s'est connecté et a accédé à d'autres pages, nous devons déterminer s'il s'est connecté sur d'autres pages et afficher le page basée sur les informations d’état de connexion. Le plan de mise en œuvre est le suivant :

Étape 1 : Dans la fonction de cycle de vie onLoad des autres pages, déterminez si l'utilisateur s'est connecté.

onLoad() {
  if(!uni.getStorageSync('isLogin')) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

Dans la fonction de cycle de vie onLoad d'autres pages, nous obtenons les informations sur l'état de connexion de l'utilisateur enregistrées localement via uni.getStorageSync. Si isLogin n'existe pas, c'est-à-dire que l'utilisateur n'est pas connecté, nous redirigeons vers la page de connexion pour permettre à l'utilisateur de se reconnecter.

Étape 2 : Dans la fonction de cycle de vie onShow des autres pages, déterminez si l'utilisateur est connecté et affichez la page en fonction des informations sur l'état de connexion.

onShow() {
  if(uni.getStorageSync('isLogin')) {
    //重新渲染页面
    console.log('已经登录')
  } else {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

Dans la fonction de cycle de vie onShow d'autres pages, nous obtenons également les informations sur l'état de connexion de l'utilisateur enregistrées localement via uni.getStorageSync. Si isLogin est présent, c'est-à-dire que l'utilisateur est connecté, nous pouvons restituer la page. Si isLogin n'existe pas, c'est-à-dire que l'utilisateur n'est pas connecté, nous redirigeons vers la page de connexion pour permettre à l'utilisateur de se reconnecter.

3. Résumé

Cet article présente la solution permettant d'accéder à d'autres pages pour les actualiser après une connexion réussie à uniapp. En enregistrant les informations d'état de connexion de l'utilisateur et en déterminant si l'utilisateur s'est connecté sur d'autres pages et en restituant la page en fonction des informations d'état de connexion, nous pouvons mieux implémenter et gérer la fonction de connexion de l'utilisateur. Les solutions ci-dessus sont uniquement à titre de référence et les développeurs peuvent les modifier et les optimiser en fonction de leurs besoins réels.

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!