好久没写博客了哈哈,今天分享一个我遇到的问题和解决方案,直接贴代码:
ps:因为之前写好的代码都在上线的项目里面,所以写这个博客特意用外网映射链接本地重新调试的代码
auth.js 授权相关逻辑
const port = {
url: 'http://localhost:8086/triplh-api/',
}
export default {
getUrlPrams(key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null) {
context = r[2];
}
return context;
},
//微信授权登录通用方法
async init() {
var that = this;
//获取url中的参数
var appId = this.getUrlPrams("appId");
var test = this.getUrlPrams("test");
//取出url中的参数
var params = {};
if (appId) {
params.appId = appId;
}
if(test){
params.test = test;
}
//将url中的参数存储到本地
let time = new Date().getTime().toString();
uni.setStorageSync(time, params);
var code = this.getUrlPrams("code");
if (code) {
var state = this.getUrlPrams("state");
params = uni.getStorageSync(state);
console.log("打印参数",JSON.stringify(params));
params.code=code;
//使用code请求服务器接口,换取用户用户openID
var [error, res] = await uni.request({
url: `${port.url}wechat/gLogin`,
data: params,
method: 'POST'
});
return res;
}
let url_ = window.location.href.replace(/\?.*#/i, "#")
var appid = 'wx2d9c964512e9a77f';
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
'&redirect_uri=' +
encodeURIComponent(url_) + '&response_type=code&scope=snsapi_userinfo&state=' + time + '#wechat_redirect';
}
}
main.js 全局引入auth.js
import auth from '@/utils/auth.js';
Vue.prototype.$auth = auth
页面中调用
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
this.$auth.init().then(res => {
console.log("用户信息返回",JSON.stringify(res))
});
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
请求:
http://***?appId=123456789&test=ABCDEFGHIJKLMN
查看控制台打印
问题:由于微信授权state参数的长度有限,而且内容只能是字母和数字。请问如果我要增加其他的参数怎么办?
解决方案:
1:获取URL中的参数
//获取url中的参数
var appId = this.getUrlPrams("appId");
var test = this.getUrlPrams("test");
//取出url中的参数
var params = {};
if (appId) {
params.appId = appId;
}
if(test){
params.test = test;
}
2:将参数保存在本地 key为当前时间戳,值为参数值
let time = new Date().getTime().toString();
uni.setStorageSync(time, params);
3:授权state参数等于时间戳(time)
let url_ = window.location.href.replace(/\?.*#/i, "#")
var appid = 'wx2d9c964512e9a77f';
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
'&redirect_uri=' +
encodeURIComponent(url_) + '&response_type=code&scope=snsapi_userinfo&state=' + time + '#wechat_redirect';
4:授权成功后根据state取出第2不保存到额值
var state = this.getUrlPrams("state");
params = uni.getStorageSync(state);