Firefox/IE不支持正则后向查找时，Vue提取Cognito回调token方案求助

嘿，我懂你现在的困扰——处理AWS Cognito的OIDC回调URL时，没法用Vue Router解析哈希里的参数，之前用的正则因为依赖后向查找，只能在Chrome里跑，兼容性太差。别担心，这里有几个靠谱的替代方案，都不用后向查找，能轻松提取id_token或者access_token：

方法1：用原生URLSearchParams解析（推荐） #

浏览器原生提供了URLSearchParams API，专门用来处理查询参数，不管是哈希里的还是URL问号后面的都能搞定，兼容性覆盖绝大多数现代浏览器（除了IE11及更早），代码还特别简洁：

// 从当前页面URL获取哈希部分，去掉开头的#
const hashParams = new URLSearchParams(window.location.hash.slice(1));

// 提取id_token
const idToken = hashParams.get('id_token');
// 提取access_token
const accessToken = hashParams.get('access_token');

这个方法完全不用写正则，直接通过get()方法就能拿到对应参数，既清晰又不容易出错。

方法2：手动拆分参数（兼容极老浏览器） #

如果你的项目需要兼容像IE11这种不支持URLSearchParams的老浏览器，可以手动拆分哈希字符串：

const hash = window.location.hash.slice(1); // 去掉#
const paramPairs = hash.split('&'); // 拆分成键值对数组

let idToken = '';
let accessToken = '';

// 遍历数组找目标参数
paramPairs.forEach(pair => {
  const [key, value] = pair.split('=');
  if (key === 'id_token') {
    idToken = value;
  } else if (key === 'access_token') {
    accessToken = value;
  }
});

这种写法没有任何API依赖，所有浏览器都能运行，就是代码稍微繁琐一点，但胜在兼容性拉满。

方法3：调整正则，去掉后向查找 #

如果你还是想用正则方案，那可以修改正则表达式，去掉后向查找的依赖，让它在所有浏览器都能生效：

// 提取id_token：匹配id_token=后面直到第一个&的内容
const idTokenMatch = window.location.hash.match(/id_token=([^&]+)/);
const idToken = idTokenMatch ? idTokenMatch[1] : '';

// 提取access_token同理
const accessTokenMatch = window.location.hash.match(/access_token=([^&]+)/);
const accessToken = accessTokenMatch ? accessTokenMatch[1] : '';

这里的正则用捕获组([^&]+)来匹配id_token=之后的所有非&字符，完全不需要后向查找，兼容性大大提升。

个人最推荐第一种方法，原生API简洁又可靠，除非有特殊的老浏览器兼容需求，否则优先用它。

内容的提问来源于stack exchange，提问作者gyc