Maison > interface Web > uni-app > le corps du texte

Parlons de comment se déconnecter dans uniapp

PHPz
Libérer: 2023-04-14 15:43:47
original
2416 Les gens l'ont consulté

UniApp est un cadre de développement multiplateforme qui peut être utilisé pour créer des applications pour plusieurs plates-formes telles que iOS, Android, H5, etc. Lorsque les développeurs utilisent UniApp pour développer des applications, ils peuvent rencontrer des situations où ils doivent se déconnecter. Cet article explique comment se déconnecter d'UniApp.

  1. Effacer le stockage local

Lors de la déconnexion, le moyen le plus simple est d'effacer le stockage local, afin d'empêcher l'utilisateur de revenir à l'état de connexion précédent lors de la réouverture de l'application après la déconnexion. Pour effacer le stockage local, utilisez la méthode uni.removeStorageSync(key). Parmi eux, la clé représente la valeur de clé stockée localement qui doit être effacée.

Par exemple :

uni.removeStorageSync('token');
Copier après la connexion

Cela effacera la valeur clé nommée "jeton" dans le stockage local.

  1. Appelez l'interface backend

Lors de la déconnexion, en plus d'effacer le stockage local, vous pouvez également appeler l'interface backend pour laisser le serveur backend effacer le statut de connexion de l'utilisateur actuel. Lors de l'appel de l'interface d'arrière-plan, la valeur du jeton de l'utilisateur doit être transmise au serveur afin que celui-ci puisse identifier l'utilisateur actuel.

Par exemple :

uni.request({
  url: 'http://localhost:3000/logout',
  method: 'POST',
  data: {
    token: uni.getStorageSync('token')
  },
  success: (res) => {
    // 请求成功,清除本地存储中的 token 值
    uni.removeStorageSync('token');
  }
});
Copier après la connexion

Dans ce code, une requête est envoyée au serveur backend via la méthode uni.request, et la valeur du jeton de l'utilisateur actuel est transmise au serveur. Si la demande aboutit, effacez la valeur du jeton dans le stockage local.

  1. Utilisation de plug-ins

En plus d'effacer manuellement le stockage local et d'appeler l'interface backend, UniApp fournit également un plug-in spécialisé pour implémenter la fonction de déconnexion. Par exemple, le plugin uni-simple-router.

Grâce à ce plug-in, vous pouvez réaliser :

import {UniSimpleRouter} from 'uni-simple-router';
const router = new UniSimpleRouter({
  routes,
  login: {
    path: '/pages/login/login'
  },
  forbidNamed: ['index']
});

router.beforeEach((to, from, next) => {
  if (to.allowAnonymous === undefined) { // 不是通过 allowAnonymous 允许的匿名则判断登录状态
    const isLogin = uni.getStorageSync('isLogin');
    if (!isLogin) { // 如果未登录
      uni.removeStorageSync('token'); // 清除 token
      if (router.LOGIN_PAGE_NAME) { // 如果有指定的登录页面,则跳转到该页面
        router.push({name: router.LOGIN_PAGE_NAME});
      } else if (router.options.login) { // 如果有指定的全局登录页面,则跳转到该页面
        router.push({path: router.options.login.path});
      } else { // 否则跳转到默认登录页面
        router.push({name: 'login'});
      }
      next(false);
    } else { // 如果已登录,则继续执行
      next();
    }
  } else { // 如果是通过 allowAnonymous 允许的匿名,则直接执行
    next();
  }
});

export default router;
Copier après la connexion

Dans ce code, utilisez le plug-in uni-simple-router pour vous déconnecter. La méthode spécifique consiste à effacer la valeur du jeton, puis à accéder à la page spécifiée. et reconnectez-vous.

Résumé

Les trois méthodes ci-dessus peuvent toutes réaliser la fonction de déconnexion dans UniApp. L'utilisation d'un plug-in est relativement simple, mais elle nécessite de télécharger et de configurer le plug-in pour y parvenir ; L'interface en arrière-plan nécessite un traitement manuel, ce qui convient aux petites applications générales. Quelle que soit la méthode utilisée, l'état de connexion doit être effacé pour empêcher l'utilisateur de revenir à l'état de connexion précédent lors de la réouverture de l'application après la déconnexion.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal