Comment gérer l'état de connexion des utilisateurs dans uni-app

 

Présentation

Uni-app ne prend pas en charge la lecture et l'écriture des cookies, vous ne pouvez donc pas juger s'il s'agit d'un état de connexion en lisant les cookies comme les applications traditionnelles.

Pendant l'opération de connexion dans uni-app, vous pouvez placer les données à vérifier dans les données de uni.request, ou vous pouvez définir un jeton dans l'en-tête et utiliser le jeton pour vérifier l'état de connexion.

Processus: La page d'accueil n'est pas connectée => se connecter => changement d'état de la page d'accueil => quitter l'application et entrer à nouveau est toujours connecté.

vuex

Utilisez vuex pour gérer le statut de connexion et enregistrer les informations utilisateur, ci-dessous fait partie du code.

const store = new Vuex.Store ({   
    state: {   
        uerInfo: {},   
        hasLogin: false   
    },   
    mutations: {   
        login (state, provider) { // changer l'état de connexion   
            state.hasLogin = true   
            state.uerInfo.token = provider. token   
            state.uerInfo.userName = provider.user_name   
            uni.setStorage ({ // Enregistrer les informations utilisateur dans la 
                clé locale   : ' uerInfo ' ,   
                data: provider   
            })  
        },   
        déconnexion (état) { // 退出 登录   
            state.hasLogin = false   
            state.uerInfo = {}   
            uni.removeStorage ({   
                clé: ' uerInfo '   
            })   
        }   
    }   
})

Se connecter

Après avoir entré le nom d'utilisateur et le mot de passe dans login.vue (page de connexion), appelez uni.request pour vous connecter. Après une connexion réussie, appelez la méthode vuex pour changer l'état de connexion de l'application.

<script>   
    import {   
        mapMutations   
    } de  ' vuex ' ;  
    exporter les {   
        méthodes par défaut : {   
            bindLogin (e) {   
                let name = e.detail.value.nameValue,   
                    password = e.detail.value.passwordValue;  
                uni.request ({   
                    url: `$ { this . $ serverUrl} / login.php`, en-   
                    tête: {   " Content-Type " : " application / x-www-form-urlencoded "
                          
                    },   
                    données: {   
                        " nom d'utilisateur " : nom,  
                         " mot de passe " : mot de passe   
                    },   
                    méthode: " POST " ,   
                    succès: (e) => {  
                         if (e.data.code === 0 ) { // Après une connexion réussie Modifiez l'état de vuex et déconnectez-vous de la page de connexion   
                            ce .login (e.data)   
                            uni.navigateBack ()   
                        }   
                    }   
                })  
            },  
            ... mapMutations ([ ' login ' ])   
        }   
    }  
 </script>

Modifier l'état de la page d'accueil

Utilisez hasLogin enregistré dans vuex pour juger s'il s'agit du statut de connexion, afin d'afficher un contenu différent.

<template>   
    <view class = " page " >   
        <view v- if = " ! hasLogin " > Il est maintenant déconnecté, cliquez sur le bouton pour vous connecter </ view>   
        <view v- else > Il est maintenant connecté, votre utilisateur L'identifiant est: {{uerInfo.userName}} </ view>   
        <button type = " primary " @ click = " bindLogin " > {{hasLogin? ' Logout ' : ' Login ' }} </ button>   
    </ view>   
</ template>   
<script>  
    import {   
        mapState,  
        mapMutations   
    } de  ' vuex ' ;  
    export par défaut {   
        calculé: mapState ([ ' hasLogin ' , ' uerInfo ' ]),   
        méthodes: {   
            ... mapMutations ([ ' logout ' ]),   
            bindLogin () {   
                if ( this .hasLogin) {  
                     this .logout ()   
                } else {   
                    uni.navigateTo ({   
                        url: ' / pages / login / login'   
                    })   
                }   
            }   
        }   
    }  
 </script>

Entrez à nouveau dans l'application

Dans App.vue, déterminez si l'utilisateur enregistre les informations utilisateur "uerInfo". S'il est enregistré, il est considéré comme l'état connecté et s'il n'est pas enregistré, il s'agit de l'état non connecté.

Après avoir obtenu les informations utilisateur dans App.vue, vous devez modifier l'état de vuex de manière synchrone, afin que toutes les pages puissent partager l'état de connexion et les informations utilisateur.

<script>   
    import {   
        mapMutations   
    } de  ' vuex ' ;   
    export par défaut {   
        onLaunch: function () {   
            uni.getStorage ({ // Récupère la 
                clé enregistrée des informations sur l'utilisateur local   : ' uerInfo ' ,   
                succès: (res) => {  
                     this .login (res.data);   
                    uni.request ({ // Vérifier et actualiser à nouveau l'heure valide du jeton   
                        url: `$ { this . $ serverUrl} / auth.php`,  
                        en-tête: {   
                            " Content-Type " : " application / x-www-form-urlencoded " ,  
                             " Token " : res.data.token   
                        },   
                        données: {   
                            " username " : res.data.user_name   
                        },   
                        méthode: " POST " ,   
                        succès: (e) => {  
                             if (e.statusCode === 200 && e.data.code === 0 ) {  
                                 ce .login (e.data);  
                            }   
                        }   
                    })   
                }   
            });  
        },   
        méthodes: {   
            ... mapMutations ([ ' login ' ])   
        }   
    }  
 </script>

Voici une démo. Dans mon nuage de code , vous pouvez jeter un œil si nécessaire