How to stay logged in in uniapp

How to maintain login status in Uniapp

Uniapp is a cross-platform development framework based on Vue.js, which can be used to develop multi-platform applications such as iOS, Android, and H5. In the development of actual projects, facing issues such as login, logout, and data interaction, how to maintain the login status has always been a difficulty. Below, we will introduce how Uniapp maintains login status from several aspects.

1. Login and storage of authentication information

In actual development, we need to log in first before we can perform other operations. When the user logs in, the server will return authentication information (such as token) to the client. After receiving the authentication information, the client needs to store it for subsequent data interaction operations. Uniapp provides methods for storing authentication information, which can be stored in uni-storage or uni-app global objects.

uni.setStorageSync('token', res.data.token); // uni-storage storage
uni.$app.globalData.token = res.data.token; // uni-app Global Object Storage

2. Automatic login

When the user closes the application and then opens the application, we hope to be able to log in automatically without having to log in manually every time. In order to achieve automatic login, we can perform authentication judgment when the application is opened to determine whether you have logged in. If you have logged in, you will enter the main page, otherwise you will enter the login page. The following is the sample 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 (interceptor) can Used for request processing, such as filtering, redirection, etc. We can use an interceptor to determine whether the currently requested interface requires login authentication. If so, determine whether you have already logged in. If you have already logged in, add authentication information, otherwise jump to the login page.

The following is a sample code for an interceptor:

// Add an interceptor before the request
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 out

When the user logs out, we need to clear the authentication information stored on the client.

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

Summary

The above is how Uniapp maintains the logged-in status. Maintaining login status through standardized login and authentication methods, automatic login, interceptors, and logout can provide guarantees for application security and user experience.

The above is the detailed content of How to stay logged in in uniapp. For more information, please follow other related articles on the PHP Chinese website!