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

九亿少女的梦@2025-06-11 22:31

复制代码

// 需要企微回调的地址
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;
        }