Comment rester connecté à Uniapp

Comment rester connecté avec Uniapp

Uniapp est un framework de développement multiplateforme basé sur Vue.js, qui peut être utilisé pour développer des applications multiplateformes telles que iOS, Android et H5. Dans le développement de projets réels, comment conserver le statut de connexion a toujours été une difficulté face à des problèmes tels que la connexion, la déconnexion et l'interaction des données. Ci-dessous, nous présenterons comment Uniapp maintient le statut de connexion sous plusieurs aspects.

1. Connexion et stockage des informations d'authentification

Dans le développement réel, nous devons d'abord nous connecter avant de pouvoir effectuer d'autres opérations. Lorsque l'utilisateur se connecte, le serveur renvoie les informations d'authentification (telles que le jeton) au client. Une fois que le client a reçu les informations d'authentification, il doit les stocker pour les opérations d'interaction de données ultérieures. Uniapp fournit des méthodes de stockage des informations d'authentification, qui peuvent être stockées dans des objets globaux uni-storage ou uni-app.

uni.setStorageSync('token', res.data.token); // Stockage uni-storage
uni.$app.globalData.token = res.data.token; // Stockage d'objets global uni-app

2. Connexion automatique

Nous voulons pouvoir se connecter automatiquement lorsque l'utilisateur ferme l'application puis la rouvre, sans avoir à se connecter manuellement à chaque fois. Afin d'obtenir une connexion automatique, nous pouvons effectuer un jugement d'authentification à l'ouverture de l'application pour déterminer si vous êtes connecté. Si vous êtes déjà connecté, accédez à la page principale, sinon accédez à la page de connexion. Voici un exemple de code :

async onLaunch() {

const token = uni.getStorageSync('token');
if (token) {
    // 已经登录，获取用户信息，进入主页面
    try {
        const userInfo = await getUserInfo(token);
        store.commit('setUserInfo', userInfo);
        uni.switchTab({
            url: '/pages/home/home'
        });
    } catch (e) {
        console.log(e);
    }
} else {
    // 未登录，进入登录页面
    uni.reLaunch({
        url: '/pages/login/login'
    });
}

}

3. Interceptor

Interceptor peut être utilisé pour traiter le processus de demande, tel que le filtrage, la redirection, etc. Nous pouvons utiliser un intercepteur pour déterminer si l'interface actuellement demandée nécessite une authentification de connexion. Si tel est le cas, déterminez si vous êtes déjà connecté. Si vous êtes déjà connecté, ajoutez des informations d'authentification, sinon passez à la page de connexion.

Voici un exemple de code pour l'intercepteur :

//Ajouter l'intercepteur avant la requête
uni.addInterceptor({

// 请求前拦截
invoke(request) {
    const token = uni.getStorageSync('token');
    // 判断接口是否需要登录认证
    if (request.header.Authorization === 'Bearer ${token}') {
        // 已经登录，添加认证信息
        request.header.Authorization = 'Bearer ${token}';
    } else {
        // 未登录，跳转到登录页面
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
    // 继续请求
    return request;
},
// 响应后拦截
intercept(response, request) {
    // 处理响应结果
    return response;
}

});

4. Déconnexion

Lorsque l'utilisateur se déconnecte, nous devons effacez les informations d’authentification de stockage côté client.

uni.removeStorageSync('token'); // uni-storage clear
uni.$app.globalData.token = null; // uni-app global object clear

Résumé

Ce qui précède explique comment Uniapp reste connecté méthode. Le maintien du statut de connexion grâce à des méthodes de connexion et d'authentification standardisées, une connexion automatique, des intercepteurs et une déconnexion peuvent fournir des garanties pour la sécurité des applications et l'expérience utilisateur.

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!