Bagaimana untuk kekal log masuk dalam uniapp

Cara mengekalkan status log masuk dalam Uniapp

Uniapp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh digunakan untuk membangunkan aplikasi berbilang platform seperti iOS, Android dan H5. Dalam pembangunan projek sebenar, menghadapi isu seperti log masuk, log keluar dan interaksi data, cara mengekalkan status log masuk sentiasa menjadi kesukaran. Di bawah, kami akan memperkenalkan cara Uniapp mengekalkan status log masuk dari beberapa aspek.

1. Log masuk dan simpan maklumat pengesahan

Dalam pembangunan sebenar, kita perlu log masuk dahulu sebelum kita boleh melakukan operasi lain. Apabila pengguna log masuk, pelayan akan mengembalikan maklumat pengesahan (seperti token) kepada klien Selepas klien menerima maklumat pengesahan, ia perlu menyimpannya untuk operasi interaksi data seterusnya. Uniapp menyediakan kaedah untuk menyimpan maklumat pengesahan, yang boleh disimpan dalam objek global uni-storage atau uni-app.

uni.setStorageSync('token', res.data.token); // storan uni-storage
uni.$app.globalData.token = res.data.token; Storan Objek Global

2. Log Masuk Automatik

Apabila pengguna menutup apl dan kemudian membuka apl semula, kami mahu boleh log masuk secara automatik tanpa perlu log masuk secara manual setiap masa. Untuk mencapai log masuk automatik, kami boleh melakukan pertimbangan pengesahan apabila aplikasi dibuka untuk menentukan sama ada anda telah log masuk. Jika anda telah log masuk, pergi ke halaman utama, jika tidak pergi ke halaman log masuk. Berikut ialah contoh kod:

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. Pemintas

Pemintas (pemintas) boleh Digunakan untuk pemprosesan permintaan, seperti penapisan, pengalihan, dsb. Kami boleh menggunakan pemintas untuk menentukan sama ada antara muka yang diminta pada masa ini memerlukan pengesahan log masuk. Jika ya, tentukan sama ada anda telah log masuk. Jika anda telah log masuk, tambah maklumat pengesahan, jika tidak, lompat ke halaman log masuk.

Berikut ialah contoh kod untuk pemintas:

// Tambah pemintas sebelum permintaan
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. Log keluar

Apabila pengguna log keluar, kami perlu mengosongkan maklumat pengesahan yang disimpan pada klien.

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

Ringkasan

Di atas ialah cara Uniapp kekal log masuk. Mengekalkan status log masuk melalui kaedah log masuk dan pengesahan piawai, log masuk automatik, pemintas dan log keluar boleh memberikan jaminan untuk keselamatan aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk kekal log masuk dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!