uniapp封装request函数 实现唯一登录，一个账号同时只能登陆一个设备

今天有空 ，所以又来总结自己的工作啦~ 今天写如何封装request请求并且 在每个请求这里通过设置token实现唯一登录的问题，一个账号同一时间只能登陆一个账号

先上封装的request代码啦~~~ 这个是借鉴网上的资料写的 我会把博主的链接放在本文最后，感兴趣的可以去看下啦
1.在项目根目录下建一个common 文件 然后写http.js ，如下图

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