uni.request的过期时间

### 如何在 Uni-app 的 Request 方法中设置 Token 为了确保用户登录状态的有效性和安全性，在 `uni-app` 中可以通过两种主要方式来设置 token： #### 通过 Header 设置 Token 当执行网络请求时，可以在请求头部加入 token 字段用于身份验证。具体实现如下所示[^1]： ```javascript // 假设已获取到 accessToken 并存储于本地缓存中 const accessToken = uni.getStorageSync('accessToken'); // 发起带有认证信息的 HTTP 请求 uni.request({ url: 'https://example.com/api/protected', // 接口地址 method: 'GET', header: { 'Authorization': `Bearer ${accessToken}`, // 将 token 添加至请求头 'content-type': 'application/json' // 根据 API 要求指定 content type }, success(res) { console.log('Response:', res.data); } }); ``` #### 自动附加 Token 到每次请求 为了避免每次都手动添加 token 至请求头，可以利用拦截器机制自动完成这一过程。下面是一个简单的例子说明如何配置全局默认参数以简化开发流程[^2]: ```javascript // 创建自定义 request 函数并注册为全局方法 function customRequest(options) { const defaultOptions = { ...options, header: { ...(options.header || {}), Authorization: `Bearer ${uni.getStorageSync('accessToken')}` } }; return new Promise((resolve, reject) => { uni.request({ ...defaultOptions, success(response) { resolve(response); }, fail(error) { reject(error); } }); }); } // 注册为全局函数以便后续调用更方便 Vue.prototype.$customRequest = customRequest; ``` 这样做的好处在于一旦完成了上述初始化工作，则在整个应用程序生命周期内发起任何类型的 HTTP 请求都将自动附带当前有效的 access_token。 #### 处理过期令牌的情况 考虑到实际应用场景下可能会遇到 token 过期的问题，建议引入 refresh_token 或者其他形式的安全策略来进行无缝续签操作[^3]: ```javascript async function refreshToken() { try { let response = await uni.request({ url: '/auth/refresh-token', method: 'POST' }); if (response.statusCode === 200 && response.data.accessToken) { // 更新本地存储中的 access token 和其有效期 uni.setStorage({ key: 'accessToken', data: response.data.accessToken }); // 返回新的 access token 供后续使用 return response.data.accessToken; } else { throw Error('Failed to refresh the token'); } } catch (error) { console.error('Error refreshing token:', error.message); // 清除旧 token 及相关信息，并重定向回登录页让用户重新授权 uni.removeStorage({key:'accessToken'}); uni.navigateTo({url:'/pages/login/index'}); } } ``` 以上就是关于如何在 `uni-app` 应用程序中正确地设置以及管理 token 的介绍。

<think>我们正在处理一个关于uni-app中使用uni.request添加token请求头的问题。根据提供的引用，我们可以总结出一些关键点： 引用[2]中提到了在请求完成后将token存储到本地，并在后续请求中携带。具体代码示例中，在登录请求成功后，将返回的token存储到本地（uni.setStorageSync），然后在后续的请求中应该从本地取出token并添加到请求头中。 引用[3]和引用[4]展示了对uni.request进行封装的方法，其中引用[3]的ts版本封装中，在请求配置中可以直接设置请求头（包括token）。 因此，我们可以这样实现： 1. 在发送请求前，从本地存储中获取token（如果有的话）。 2. 在uni.request的header中添加token，通常是将token放在Authorization字段或者自定义的字段（如x-access-token）中，具体根据后端要求。 步骤： 1. 封装uni.request，在每次请求时，从本地存储中读取token。 2. 将读取到的token添加到请求的header中。 下面是一个封装的示例（使用JavaScript，非TS）： 创建一个request.js文件，用于封装uni.request。 在request.js中： - 我们可以定义一个基础的请求方法，并设置请求的基地址（baseURL）等。 - 在每次请求前，从本地存储中获取token（例如uni.getStorageSync('x-access-token')），然后添加到请求头。 示例代码： ```javascript // utils/request.js // 定义基础URL const baseURL = 'https://your-api-base-url.com'; // 封装request函数 const request = (options) => { // 从本地存储中获取token const token = uni.getStorageSync('x-access-token'); // 合并请求选项 options.url = baseURL + options.url; options.header = options.header || {}; if (token) { // 根据后端要求设置token，这里假设使用Authorization: Bearer token 的形式 // 或者可能是自定义字段，如：options.header['x-access-token'] = token; options.header['Authorization'] = `Bearer ${token}`; } // 返回一个Promise return new Promise((resolve, reject) => { // 显示加载中（如果需要） if (options.hideLoading !== true) { uni.showLoading({ title: '加载中...', mask: true }); } uni.request({ ...options, success: (res) => { // 这里可以根据状态码进行判断 if (res.statusCode === 200) { resolve(res.data); } else { reject(res); } }, fail: (err) => { reject(err); }, complete: () => { if (options.hideLoading !== true) { uni.hideLoading(); } } }); }); }; export default request; ``` 然后在api.js（或具体的api模块）中，使用这个封装的request来发送请求： ```javascript // api/user.js import request from '@/utils/request.js'; // 获取用户信息 export function getUserInfo() { return request({ url: '/user/info', method: 'GET' }); } ``` 在页面中使用： ```javascript import { getUserInfo } from '@/api/user.js'; getUserInfo().then(res => { console.log(res); }).catch(err => { console.error(err); }); ``` 这样，每次请求都会自动携带token。 注意：如果token过期或其他需要刷新token的情况，可以在拦截响应时处理，但这里只处理了请求头携带token。 另外，根据引用[2]中的示例，他们在登录成功后存储了token，所以在后续的请求中就可以从存储中获取到。 总结：通过封装uni.request，在请求前统一添加token到请求头，可以实现在uni-app中请求携带token。 相关问题： 1. 如何在uni-app中实现登录认证并存储token？ 2. uni-app中如何封装网络请求以支持统一错误处理？ 3. 如何刷新过期的token并重新发送请求？</think>在 uni-app 中使用 `uni.request` 添加 token 请求头，可以通过以下步骤实现： ### 解决方案：封装 uni.request 添加 Token #### 1. 创建封装文件（utils/request.js） ```javascript // utils/request.js const baseURL = 'https://your-api-domain.com'; // 替换为实际API地址 export const request = (options) => { // 从本地存储获取token const token = uni.getStorageSync('x-access-token') || ''; return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, method: options.method || 'GET', data: options.data || {}, header: { // 添加token到请求头 'Authorization': `Bearer ${token}`, // 或使用自定义头（根据后端要求） 'x-access-token': token, ...options.header // 合并自定义header }, success: (res) => { if (res.statusCode === 200) { resolve(res.data); } else { reject(res); } }, fail: (err) => reject(err) }); }); }; ``` #### 2. 在 API 文件中使用（api/index.js） ```javascript // api/index.js import { request } from '@/utils/request'; // 获取用户信息 export const getUserInfo = () => request({ url: '/user/info', method: 'GET' }); // 提交数据 export const submitData = (data) => request({ url: '/data/submit', method: 'POST', data }); ``` #### 3. 在页面中使用 ```javascript import { getUserInfo } from '@/api/index'; export default { methods: { async loadData() { try { const res = await getUserInfo(); console.log('用户数据:', res); } catch (err) { console.error('请求失败:', err); } } }, mounted() { this.loadData(); } } ``` #### 4. 登录后存储 Token ```javascript // 登录成功后保存token uni.request({ url: '/api/login', method: 'POST', data: { username, password }, success: (res) => { if (res.data.token) { uni.setStorageSync('x-access-token', res.data.token); // 存储token } } }); ``` ### 关键点说明 1. **Token 获取**：通过 `uni.getStorageSync` 从本地存储获取登录时保存的 token 2. **请求头设置**： - `Authorization: Bearer <token>`（标准JWT格式） - 或自定义头 `x-access-token: <token>`（根据后端要求） 3. **统一封装**：所有 API 请求通过封装方法发出，确保自动携带 token 4. **安全存储**：Token 存储在本地，避免明文传输 ### 注意事项 1. **HTTPS 必须**：生产环境务必使用 HTTPS 协议传输敏感数据 2. **Token 刷新**：需实现 token 过期时的自动刷新机制 3. **存储安全**：敏感数据建议使用 `uni.setStorageSync` 加密存储 4. **拦截器扩展**：可添加响应拦截器处理 401 未授权错误 > 实际开发中请根据后端 API 规范调整请求头字段名称（如 `Authorization` 或 `x-access-token`）[^2][^3]。 --- ### 相关问题 1. 如何在 uni-app 中实现 token 过期自动刷新？ 2. uni-app 中如何安全地存储认证 token？ 3. 如何处理 uni.request 的全局错误拦截（如 401/403 状态码）？ 4. uni-app 封装网络请求时如何添加公共参数？ 5. 如何在不同平台（H5/小程序/App）统一处理请求超时？ > 参考实现中的 token 处理方式借鉴了 uni-app 请求封装的最佳实践[^2][^3][^4]。