uniapp 不用登陆页面获取token 并放在请求头上
时间: 2024-11-09 20:17:06 浏览: 17
UniApp (基于 Vue.js 的跨平台框架) 提供了一种方便的方式来管理用户的登录状态和授权。通常情况下,为了在不显示登录页面的情况下获取 token 并将其添加到请求头里,你可以使用 Uni-app 中的`uni.getUserInfo`或`uni.login`函数结合存储库(如本地存储 LocalStorage 或者 H5 的 sessionStorage)来实现。
首先,用户首次登录后,通过 `getUserInfo` 获取用户信息并同时保存 token 到本地:
```javascript
uni.login({
success: function (res) {
const code = res.code; // 获取code,后续用于换取token
uni.getUserInfo({
provider: 'account', // 使用账号密码登录
success: function(userInfo) {
// 将token保存到本地,例如LocalStorage
localStorage.setItem('accessToken', userInfo.openid);
// 使用token发起请求
requestWithToken();
}
});
}
})
```
然后,在需要发送带 token 请求的地方,可以从本地获取 token 并设置到请求头:
```javascript
function requestWithToken() {
const accessToken = localStorage.getItem('accessToken'); // 从localStorage读取token
uni.request({
url: '你的API地址',
method: 'GET',
header: {
'Authorization': 'Bearer ' + accessToken // 添加 Authorization 头,格式通常是 "Bearer " + token
},
success: function (res) {
console.log(res.data);
}
});
}
```
需要注意的是,这只是一个基本示例,实际应用中还要处理错误情况、刷新 token 和 token 过期等问题。另外,对于一些敏感操作,建议在服务器端验证 token 而非前端。
阅读全文