今天有空 ,所以又来总结自己的工作啦~ 今天写如何封装request请求并且 在每个请求这里通过设置token实现唯一登录的问题,一个账号同一时间只能登陆一个账号
先上封装的request代码啦~~~ 这个是借鉴网上的资料写的 我会把博主的链接放在本文最后,感兴趣的可以去看下啦
1.在项目根目录下建一个common 文件 然后写http.js ,如下图
![目录](https://img-blog.csdnimg.cn/20200403172413839.png)
2.然后在main.js文件中引入
import http from './common/http.js'
Vue.prototype.$HTTP = http
3.http.js文件内容
// created by wangyong for uni-app request 2019.11.22
const process= 'development';
var baseURL = 'http://www.XXXXX.XXXXX.com'; //这里写接口名称就好啦
if(process === 'development'){
console.log('开发环境/测试环境')
// baseURL = '/api'; //这里是做的代理服务器操作 另一篇文章有写哦
//如果不做代理可以直接删掉
}else{
console.log('生产环境/正式环境')
baseURL = 'http://www.XXXX.XXXXX.com';
// baseURL = '/formalAPI';
}
const http = (options) => {
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中...',
mask: options.load || false // 默认遮罩出现可以继续操作
});
try{
// 从本地获取token
var newtoken=""
uni.getStorage({
key: 'token',
success: function(res) {
console.log(res.data);
newtoken = res.data
}
});
uni.request({
url: (options.baseURL || baseURL) + options.url,
method: options.method || 'POST', // 默认为POST请求
data: options.data, //请求超时在manifest.json配置
header: {
'token': newtoken,
'Content-Type': options.header == 'form' ? 'application/x-www-form-urlencoded' : 'application/json'
},
success: res => {
if(res.data.code==403){
console.log(res.data.msg)
// uni.showToast({
// icon:'none',
// title:'账号在别处登录!'
// })
//返回403代表异地登录 退出登录 并将token置为空
let outs = setTimeout(function(){
uni.navigateTo({
url: '/pages/login/login'
});
},1000)
uni.showLoading({
title: 'res.data.msg',
mask: options.load || false // 默认遮罩出现可以继续操作
});
uni.setStorage({
key:"token",
data:""
})
}
resolve(res)
},
fail: (err) => {
reject(err.data);
console.log(err);
uni.showToast({
title: '请检查网络连接',
icon: 'none'
})
/*错误码处理
let code = err.data.code;
switch (code) {
case 1000:
break;
default:
break;
} */
},
complete: () => {
uni.hideLoading();
}
});
}catch(e){
uni.hideLoading();
uni.showToast({
title: '服务端异常',
icon: 'none'
})
}
})
}
export default http
使用方法:
this.$HTTP({
url:'/index.php/Task/TaskHandle',
method:'POST',
data:{
'userID':personID,
'status':this.TabCur4
}
}).then((res)=> {
console.log('加载成功'+ res.data.code)
if(res.data.code==200){
//数据渲染操作
}
},(err)=>{
console.log(err)
//这里是reject返回的参数
})
接下来将唯一登录的思路和实现:
- 在请求头中设置token,用token来判断是否异地登录
- 首先,在登录的时候 ,后台会返回一个token 存储在本地
login.vue页面
uni.request({
method: 'POST',
url: this.baseUrl + 'index.php/login/SignIn',
data: {
UserName: this.account,
PassWord: this.password
},
success: res => {
console.log(res.data);
if (res.data.code == 200) {
uni.showToast({
icon: 'none',
title: '登陆成功!!!'
});
uni.setStorage({
key: 'token',
data: res.data.data.token
});
}
}
})
- 其次,在其他接口请求的时候从本地获取token,在请求头里发送这个token,如果和后台的token是一致的,说明没有异地登录,一旦异地登录,后台的token就会发生变化,与请求头中的token不一致,则会返回404状态码,这时候退出登录,清空本地存储的token即可,代码在上面封装的request请求里面,这里只放代码片段
http.js页面
header: {
'token': newtoken,
'Content-Type': options.header == 'form' ? 'application/x-www-form-urlencoded' : 'application/json'
},
- 最后再次登录时后端会发送新的token 再次保存在请求头中
如果只想实现request请求的封装可以去看这位博主的链接:
https://www.jianshu.com/p/2bb51abfff1b