uniapp如何保持登录状态

uniapp如何保持登录状态

Uniapp是一个基于Vue.js的跨平台开发框架，可以用它来开发iOS、Android、H5等多平台应用。在开发实际项目中，面对登录、注销、数据交互等问题，如何保持登录状态一直是一个难点。下面，我们将从几个方面来介绍uniapp如何保持登录状态。

1. 登录和存储认证信息

在实际开发中，我们需要首先进行登录操作，然后才能进行其他操作。在用户登录时，服务器会返回认证信息（如token）给客户端，客户端收到认证信息后，需要将其存储起来，以便后续的数据交互操作。Uniapp提供了存储认证信息的方法，可将其存储在uni-storage或uni-app全局对象中。

uni.setStorageSync('token', res.data.token);  // uni-storage存储
uni.$app.globalData.token = res.data.token;   // uni-app全局对象存储

1. 自动登录

在用户关闭应用后再打开应用时，我们希望能够自动登录，而不需要每次都手动登录。为了实现自动登录，我们可以在应用打开时进行认证判断，判断是否已经登录，如果已经登录则进入主页面，否则进入登录页面。以下是示例代码：

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

}

1. 拦截器

拦截器（interceptor）可以用于请求过程的处理，如过滤、重定向等。我们可以使用拦截器来判断当前请求的接口是否需要登录认证，如果需要，则判断是否已经登录，如果已经登录则添加认证信息，否则跳转到登录页面。

以下是拦截器的示例代码：

// 在请求之前添加拦截器
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;}

});

1. 退出登录

当用户退出登录时，我们需要清除存储在客户端的认证信息。

uni.removeStorageSync('token');  // uni-storage清除
uni.$app.globalData.token = null;   // uni-app全局对象清除

总结