企业微信对接:回调地址带#时返回地址参数位置不对的问题

复制代码
// 需要企微回调的地址
http://localhost:1024/app/#/SsoLogin?loginMethod=qw

// 企微配置的地址
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A1024%2Fapp%2F%23%2FSsoLogin%3FloginMethod%3Dqw&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

// 企微返回的地址
http://localhost:1024/app/?code=xxxxxxxxxxxxxxxxxxstate=000000#/SsoLogin?loginMethod=qw

返回结果并没有在#/SsoLogin后拼接参数

方法一:

企微返回的地址虽然参数顺序不对,但还是访问到/SsoLogin这个地址

只需要在这个页面中处理一下字符串取出参数即可

复制代码
const getUrlParamsRegex = url => {
  const params = {};
  // 处理 URL 中的参数
  const urlParts = url.split("?");
  if (urlParts[1]) {
    const searchParams = new URLSearchParams(urlParts[1].split("#")[0]);
    for (const [key, value] of searchParams.entries()) {
      params[key] = value;
    }
  }
  // 处理 hash 中的参数
  const hashParts = url.split("#");
  if (hashParts[1]) {
    const hashParams = new URLSearchParams(hashParts[1].split("?")[1] || "");
    for (const [key, value] of hashParams.entries()) {
      params[key] = value;
    }
  }
  return params;
};

// 返回结果取值  const urlParamsRegex = getUrlParamsRegex(window.location.href);
// urlParamsRegex.code

方法二

1、修改vue路由模式,去掉#

复制代码
// createWebHashHistory改为createWebHistory,并可以在配置额文件指定路由后缀VITE_PUBLIC_PATH

// 原代码
const router = createRouter({
  history: createWebHashHistory(),
...
});

// 修改后
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_PATH),
...
});

2、修改nginx配置

复制代码
// 原配置
        location /app {
            root  /usr/share/nginx;
            index index.html;
        }

// 修改后
        location /app {
            root  /usr/share/nginx;
            index index.html;
            try_files $uri $uri/ /cloud/index.html;
        }
相关推荐
R-sz1 天前
企业微信H5应用OAuth2登录,企业微信授权登录
企业微信
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘2 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug3 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201304 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
敲可耐的咕魂君4 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
AI企微观察4 天前
企业微信社群互动技术落地:5种形式的功能实现与效率优化
企业微信
前端程序猿-秦祥5 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript