I haven’t written a blog for a long time, haha, today I will share a problem and solution I encountered, and post the code directly:
ps: Because the code written before is in the online project, so I wrote this blog to use the external network mapping link to the local re-debugging code
auth.js authorization related logic
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 imports auth.js globally
import auth from '@/utils/auth.js';
Vue.prototype.$auth = auth
page call
<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>
ask:
http://***?appId=123456789&test=ABCDEFGHIJKLMN
View console print
Problem: Due to the limited length of the WeChat authorization state parameter, and the content can only be letters and numbers. What if I want to add other parameters?
solution:
1: Get the parameters in the 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: Save the parameter in the local key as the current timestamp, and the value is the parameter value
let time = new Date().getTime().toString();
uni.setStorageSync(time, params);
3: The authorization state parameter is equal to the timestamp (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: After the authorization is successful, the second value is taken out according to the state and is not saved to the amount
var state = this.getUrlPrams("state");
params = uni.getStorageSync(state);