Une brève analyse de la méthode de mise en œuvre de l'initialisation Uniapp sans saut de connexion

Lors du développement avec UniApp, nous pouvons rencontrer des pages qui nécessitent que les utilisateurs se connectent pour accéder, telles que des paniers d'achat, des pages de commande, etc. Alors, comment accéder automatiquement à la page de connexion lorsque vous n'êtes pas connecté ? Cet article vous donnera une introduction détaillée à la méthode d'implémentation de l'initialisation UniApp sans saut de connexion.

1. Analyse des exigences

Ajoutez la fonction de connexion à l'application et permettez-lui d'accéder à la page de connexion lorsque vous entrez dans la page correspondante lorsque vous n'êtes pas connecté.

2. Idées d'implémentation

1. Écrivez le code logique lié à la connexion dans le fichier App.vue.
2. Utilisez un intercepteur de route pour vérifier si l'utilisateur est connecté lorsqu'il entre dans une page qui nécessite une connexion. Sinon, il passera automatiquement à la page de connexion.
3. Utilisez Vuex pour gérer les informations utilisateur afin de stocker le statut de connexion et de transférer les informations utilisateur.

3. Implémentation du code

1. Ajouter une logique de connexion dans App.vue

Nous pouvons exécuter la logique de vérification de connexion dans la fonction de cycle de vie créée dans App.vue. Par exemple :

created(){
    // 检查用户是否已登录
    let loginInfo = uni.getStorageSync('loginInfo') || null;
    if(loginInfo){
        this.$store.commit('saveUserInfo', loginInfo);
    }else{
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
}

Ici, nous obtenons les informations de connexion stockées localement via la méthode uni.getStorageSync(). Si les informations de connexion existent, transmettez les informations utilisateur au gestionnaire d'état Vuex ; sinon, accédez à la page de connexion.

2. Implémenter l'intercepteur d'itinéraire

Généralement, l'état de connexion est vérifié avant le saut d'itinéraire. Nous pouvons définir un intercepteur de route pour effectuer les opérations pertinentes avant de passer à la page qui nécessite une connexion.

Introduisez la route dans main.js :

import router from './router';

et ajoutez l'intercepteur de route :

router.beforeEach((to, from, next) => {
    // 进入需要登录的页面前先进行登录状态检查
    let isLogin = store.getters.getLoginStatus;
    if (to.meta.requireAuth) { 
        // 如果未登录，则跳转至登录页面
        if(!isLogin){
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            });
        }else{
            next();
        }
    }else{
        next();
    }
});

Ici, nous déterminons si la page nécessite une connexion en fonction du fait que le champ requireAuth est marqué dans la route. Si vous devez vous connecter, vérifiez si l'utilisateur actuel est connecté. Sinon, accédez à la page de connexion, sinon autorisez l'accès continu. Si aucune connexion n’est requise, sautez directement.

3. Implémentez le stockage et la livraison des informations utilisateur

Créez un module nommé userInfo dans le gestionnaire d'état Vuex pour gérer les informations utilisateur. Nous pouvons y définir des getters, des mutations et des actions liés à l'utilisateur.

Dans le fichier userInfo.js, définissez le code suivant :

const state = {
    userInfo: null
}

const getters = {
    getUserInfo: state => state.userInfo,
    getLoginStatus: state => state.userInfo != null
}

const mutations = {
    saveUserInfo (state, userInfo) {
        state.userInfo = userInfo;
        uni.setStorageSync('loginInfo', userInfo);
    },
    logout(state){
        state.userInfo = null;
        uni.removeStorageSync('loginInfo');
    }
}

const actions = {
    login({ commit }, userInfo) {
        // 登录操作
        commit('saveUserInfo', userInfo);
    },
    logout({ commit }){
        // 登出操作
        commit('logout');
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

Ici, nous définissons des fonctions telles que getUserInfo, getLoginStatus, saveUserInfo, logout et login, qui sont également utilisées pour obtenir, stocker et effacer les informations utilisateur. comme simuler la connexion et la connexion hors service. Parmi eux, lorsque la méthode saveUserInfo stocke les informations utilisateur, en plus de transmettre les informations utilisateur à l'État, elle les stocke également localement pour faciliter le stockage persistant.

4. Résumé

En utilisant l'intercepteur de routage et le gestionnaire d'état Vuex fournis par UniApp, la fonction de passage automatique à la page de connexion lorsque vous n'êtes pas connecté est réalisée. Si vous devez utiliser les données de connexion sur d'autres pages, il vous suffit d'introduire Vuex dans le composant correspondant, ce qui est très pratique.

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!