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

心已赠人 2021-08-27 11:25 1325阅读 0赞

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

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

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][https_www.jianshu.com_p_2bb51abfff1b]

[20200403172413839.png]: /images/20210813/7f72fd7230874896974b7c9f5884402d.png
[https_www.jianshu.com_p_2bb51abfff1b]: https://www.jianshu.com/p/2bb51abfff1b