Uni-app中本地缓存token的存储与获取方法

9 次阅读

Token作为用户身份认证的重要凭证，在移动端应用开发中扮演着关键角色。Uni-app支持多端开发，因此如何安全、高效地完成token本地缓存、读取以及管理，是开发登录功能、接口请求拦截等业务时经常遇到的问题。

Uni-app提供了内置的本地存储API，可以方便地将token保存到设备缓存中，并在后续请求时获取使用。合理使用缓存机制，不仅能够提升用户体验，还可以避免用户每次打开应用都重新登录。

一、Uni-app本地缓存token的基本方式

Uni-app中的本地缓存主要通过uni.setStorage、uni.getStorage等API实现。这些方法基于浏览器Storage或原生端本地存储能力进行了统一封装，可以兼容微信小程序、H5、App等多个平台。

常见的token缓存流程如下：

  1. 用户登录成功；

  2. 后端返回token；

  3. 前端调用缓存API保存token；

  4. 后续接口请求时读取token；

  5. 将token放入请求头完成身份验证。

例如，登录接口返回的数据如下：

JavaScript
{
    code: 200,
    data: {
        token: "abcdef123456789"
    }
}

获取token后，可以保存到本地缓存中。

二、使用uni.setStorage存储token

uni.setStorage是Uni-app推荐使用的异步缓存方法。

示例代码：

JavaScript
login() {
    uni.request({
        url: 'https://example.com/login',
        method: 'POST',
        data: {
            username: 'admin',
            password: '123456'
        },
        success: (res) => {
            if (res.data.code === 200) {
                const token = res.data.data.token;

                uni.setStorage({
                    key: 'token',
                    data: token,
                    success() {
                        console.log('token保存成功');
                    }
                });
            }
        }
    });
}

执行成功后，token会被保存到本地缓存中。之后用户重新打开应用，也可以继续读取该数据。

三、使用uni.getStorage获取token

保存token后，可以通过uni.getStorage获取缓存内容。

示例：

JavaScript
uni.getStorage({
    key: 'token',
    success(res) {
        console.log('当前token：', res.data);
    },
    fail() {
        console.log('token不存在');
    }
});

如果缓存中存在对应key，res.data就是之前保存的token。

这种方式适合页面初始化、请求接口前检查用户登录状态等场景。

四、同步方式存储和获取token

除了异步API，Uni-app还提供同步方法：

保存token

JavaScript
uni.setStorageSync('token', token);

获取token

JavaScript
const token = uni.getStorageSync('token');

console.log(token);

同步方法代码更加简洁，适合简单场景使用。

例如：

JavaScript
const token = res.data.token;

uni.setStorageSync('token', token);

获取时：

JavaScript
let token = uni.getStorageSync('token');

if (token) {
    console.log('用户已经登录');
}

不过需要注意，同步操作会阻塞当前线程。如果频繁执行大量缓存操作，可能影响页面响应速度。

五、封装token缓存工具类

在实际项目中，不建议在每个页面直接调用缓存API，而应该统一封装管理。

例如创建utils/auth.js：

JavaScript
const TokenKey = 'token';

export function setToken(token) {
    return uni.setStorageSync(TokenKey, token);
}

export function getToken() {
    return uni.getStorageSync(TokenKey);
}

export function removeToken() {
    return uni.removeStorageSync(TokenKey);
}

使用时：

JavaScript
import {
    setToken,
    getToken,
    removeToken
} from '@/utils/auth.js';


setToken('abcdef123456');

let token = getToken();

console.log(token);

removeToken();

通过统一管理，可以减少重复代码，同时方便后期修改token存储方式。

六、请求接口自动携带token

通常情况下，token需要添加到请求头中，例如：

Authorization: Bearer token值

可以通过uni.request封装实现自动添加。

示例：

JavaScript
import {
    getToken
} from '@/utils/auth.js';


function request(options) {

    let token = getToken();

    return uni.request({
        url: 'https://example.com' + options.url,
        method: options.method || 'GET',
        data: options.data || {},
        header: {
            Authorization: token
        }
    });
}

之后业务接口调用时：

JavaScript
request({
    url:'/user/info',
    method:'GET'
});

请求会自动携带用户身份信息。

这种方式能够避免每个接口重复编写token逻辑。

七、退出登录时清除token

用户主动退出账号时，需要删除本地缓存中的token。

示例：

JavaScript
uni.removeStorageSync('token');

uni.reLaunch({
    url:'/pages/login/login'
});

删除token后，用户再次进入应用时，需要重新完成登录流程。

八、token过期处理方案

实际项目中，token通常具有有效时间。如果token过期，服务器会返回类似401或403状态码。

可以在请求封装中统一处理：

JavaScript
if(res.statusCode === 401){

    uni.removeStorageSync('token');

    uni.navigateTo({
        url:'/pages/login/login'
    });

}

这样可以避免用户继续使用失效身份访问接口。

更完善的方案是结合refresh token机制：

  • access token用于日常接口访问；

  • refresh token用于刷新新的access token；

  • access token过期后自动更新。

这种方式可以减少用户频繁登录，提高应用体验。

九、token存储安全注意事项

虽然Uni-app提供了方便的本地缓存方式，但token仍然属于敏感信息，需要注意安全问题。

1. 不要存储永久有效token

长期有效token如果泄露，会增加账号风险。

建议：

  • 设置合理过期时间；

  • 服务端支持token失效机制；

  • 定期刷新token。

2. 不要在日志中输出token

开发阶段经常使用：

JavaScript
console.log(token);

正式上线前应该删除相关日志，避免token被调试工具获取。

3. 注意缓存清理

用户退出账号、切换账号时，应及时删除旧token。

否则可能出现账号信息混乱的问题。

4. 配合HTTPS使用

token传输过程中必须使用HTTPS加密通信，避免网络环境中被截取。

十、uni-app中token缓存常见问题

1. 获取不到token怎么办？

可以检查：

  • key名称是否一致；

  • 是否在保存完成后立即读取；

  • 是否调用了清除缓存方法；

  • 不同运行环境缓存是否独立。

例如：

保存：

JavaScript
uni.setStorageSync('token','123456');

读取：

JavaScript
uni.getStorageSync('Token');

由于大小写不同，会导致获取失败。

2. APP卸载后token是否存在？

通常情况下，应用卸载后本地缓存会被系统清除。

重新安装应用后，需要重新登录。

3. 多端运行缓存是否共享？

不同平台的缓存环境相互独立。

例如：

  • H5浏览器缓存；

  • 微信小程序缓存；

  • App本地缓存；

它们不会自动同步。

十一、推荐的项目实践方式

在中大型Uni-app项目中，建议采用以下结构：

├── utils
│   └── auth.js
├── api
│   └── request.js
├── store
│   └── user.js
└── pages
    └── login

其中：

  • auth.js负责token存取；

  • request.js负责自动携带token；

  • user.js负责用户状态管理；

  • 登录页面负责获取并保存token。

这种分层方式能够提高代码维护性，也方便后续扩展权限控制、自动刷新token等功能。

总结

Uni-app中本地缓存token主要依靠uni.setStorage、uni.getStorage以及对应的同步方法实现。简单项目可以直接使用缓存API完成token保存和读取，而实际开发中更推荐进行统一封装，并结合请求拦截、过期处理以及安全策略构建完整认证流程。

合理管理token，不仅能够提升用户登录体验，还能增强应用接口访问的安全性，是Uni-app开发中不可缺少的重要实践。

文章标签
Uni-app token缓存 uni.setStorage uni-app登录 前端身份认证