Analisis ringkas kaedah pelaksanaan pemula uniapp tanpa lompat log masuk

Apabila membangun dengan UniApp, kami mungkin menghadapi halaman yang memerlukan pengguna log masuk untuk masuk, seperti troli beli-belah, halaman pesanan, dsb. Jadi, bagaimana untuk melompat ke halaman log masuk secara automatik apabila tidak log masuk? Artikel ini akan memberi anda pengenalan terperinci kepada kaedah pelaksanaan pemula UniApp tanpa lompat log masuk.

1. Analisis Keperluan

Tambahkan fungsi log masuk ke aplikasi, dan sedar melompat ke halaman log masuk apabila memasuki halaman yang berkaitan apabila tidak log masuk.

2. Idea pelaksanaan

1. Tulis kod logik yang berkaitan dengan log masuk dalam fail App.vue.
2. Gunakan pemintas laluan untuk menyemak sama ada pengguna log masuk apabila memasuki halaman yang memerlukan log masuk. Jika tidak, ia akan melompat ke halaman log masuk secara automatik.
3. Gunakan Vuex untuk mengurus maklumat pengguna untuk menyimpan status log masuk dan memindahkan maklumat pengguna.

3. Pelaksanaan kod

1 Tambahkan logik log masuk dalam App.vue

Kami boleh melaksanakan logik pengesahan log masuk dalam fungsi kitaran hayat yang dibuat dalam App.vue . Contohnya:

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

Di sini, kami mendapat maklumat log masuk yang disimpan secara setempat melalui kaedah uni.getStorageSync(). Jika maklumat log masuk wujud, serahkan maklumat pengguna kepada pengurus negeri Vuex jika tidak, lompat ke halaman log masuk.

2. Laksanakan pemintas laluan

Secara amnya, status log masuk disemak sebelum lompat laluan. Kami boleh menentukan pemintas laluan untuk melakukan operasi yang berkaitan sebelum melompat ke halaman yang memerlukan log masuk.

Perkenalkan laluan dalam main.js:

import router from './router';

dan tambah pemintas laluan:

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();
    }
});

Di sini, kami menentukan sama ada medan requireAuth ditandakan dalam laluan , tentukan sama ada halaman memerlukan log masuk. Jika anda perlu log masuk, semak sama ada pengguna semasa telah log masuk. Jika tidak, lompat ke halaman log masuk jika tidak, benarkan akses berterusan. Jika tiada log masuk diperlukan, lompat terus.

3. Laksanakan penyimpanan dan penghantaran maklumat pengguna

Buat modul bernama userInfo dalam pengurus keadaan Vuex untuk mengurus maklumat pengguna. Kami boleh menentukan beberapa getter, mutasi dan tindakan yang berkaitan dengan pengguna di dalamnya.

Dalam fail userInfo.js, tentukan kod berikut:

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
}

Di sini, kami mentakrifkan fungsi seperti getUserInfo, getLoginStatus, saveUserInfo, log keluar dan log masuk untuk mendapatkan, menyimpan, mengosongkan pengguna maklumat, dan simulasi operasi log masuk dan log keluar. Antaranya, apabila kaedah saveUserInfo menyimpan maklumat pengguna, selain menghantar maklumat pengguna kepada negeri, ia juga menyimpannya secara tempatan untuk memudahkan penyimpanan berterusan.

4. Ringkasan

Dengan menggunakan pemintas laluan dan pengurus keadaan Vuex yang disediakan oleh UniApp, fungsi melompat ke halaman log masuk secara automatik apabila tidak log masuk direalisasikan. Jika anda perlu menggunakan data log masuk di halaman lain, anda hanya perlu memperkenalkan Vuex dalam komponen yang sepadan, yang sangat mudah.

Atas ialah kandungan terperinci Analisis ringkas kaedah pelaksanaan pemula uniapp tanpa lompat log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!