uniapp uni-id-common登录态失效频繁，如何保持用户登录状态？

Question

在使用UniApp结合uni-id-common时，用户反馈登录态频繁失效，影响体验。主要原因可能涉及token过期、存储不当或网络请求未正确携带授权信息。如何有效保持登录状态？首先，确保token安全存储于`StorageSync`，避免因页面刷新丢失。其次，设置自动续期机制，在检测到token即将过期时，调用`/auth/renew_token`接口更新。此外，全局拦截器中校验每次请求的响应码，如遇401（未授权），可静默重新登录或提示用户。最后，检查服务器端session管理策略，确保与前端token生命周期一致。通过以上方法，可大幅减少登录态失效问题，提升用户体验。

Answer 1

1. 问题分析：登录态频繁失效的原因

在使用UniApp结合uni-id-common时，用户反馈登录态频繁失效的问题，主要涉及以下几个原因：

• Token过期： 用户的Token在服务器端设置了生命周期，超时后未及时更新。
• 存储不当： Token可能未正确存储在持久化位置（如Storage），导致页面刷新后丢失。
• 网络请求未携带授权信息： 前端未将Token正确附加到请求头中，导致服务器无法验证身份。

以上问题可能导致用户体验下降。为解决这些问题，我们需要从多个角度进行优化。

2. 解决方案：确保Token安全存储

首先，确保Token的安全存储是保持登录状态的基础。推荐使用`StorageSync`来存储Token，避免因页面刷新而丢失数据。

// 存储Token
uni.setStorageSync('token', 'your_token_value');

// 获取Token
const token = uni.getStorageSync('token');
    

此外，可以通过加密方式进一步提升Token的安全性，防止敏感信息泄露。

3. 自动续期机制：延长Token生命周期

设置自动续期机制可以有效减少Token过期的情况。当检测到Token即将过期时，调用`/auth/renew_token`接口更新Token。

步骤	描述
1	获取Token的过期时间戳。
2	判断当前时间是否接近过期时间。
3	若接近过期，则调用`/auth/renew_token`接口更新Token。

示例代码如下：

function checkTokenExpiration() {
    const token = uni.getStorageSync('token');
    const expirationTime = uni.getStorageSync('expiration_time');
    if (Date.now() > expirationTime - 60000) { // 提前1分钟续期
        renewToken();
    }
}

function renewToken() {
    uni.request({
        url: '/auth/renew_token',
        method: 'POST',
        data: { refreshToken: uni.getStorageSync('refresh_token') },
        success(res) {
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('expiration_time', res.data.expiration_time);
        }
    });
}
    

4. 全局拦截器：处理未授权响应

在全局拦截器中校验每次请求的响应码，如遇401（未授权），可静默重新登录或提示用户。以下是一个简单的拦截器实现：

uni.addInterceptor('request', {
    invoke(args) {
        args.header = args.header || {};
        args.header.Authorization = `Bearer ${uni.getStorageSync('token')}`;
    }
});

uni.addInterceptor('request:fail', {
    invoke(err) {
        if (err.statusCode === 401) {
            handleUnauthorized();
        }
    }
});

function handleUnauthorized() {
    // 尝试静默重新登录
    renewToken().then(() => {
        // 重新发起请求
    }).catch(() => {
        // 提示用户登录
        uni.navigateTo({ url: '/pages/login/login' });
    });
}
    

5. 检查服务器端Session管理策略

最后，检查服务器端的Session管理策略，确保与前端Token生命周期一致。以下是需要关注的几个方面：

1. Token的有效期设置是否合理。
2. 是否支持Refresh Token机制。
3. Session和Token的同步销毁逻辑是否正确。

上图为Token生命周期管理的流程图，展示了Token生成、续期和销毁的过程。