Javascript - 从 window.location.href 查询参数

Question

我是 Javascript 语法的新手；抱歉，如果这太基础了。

使用此查询:

const params = queryString.parse(window.location.href)

我正在获取:

{http://localhost:3000/#access_token: "accessToken", refresh_token: "refreshToken"}

现在我可以轻松做到:

const refresh_token = params.refresh_token;

但是我如何获取“accessToken”？

Answer 1

看起来哈希值是格式错误的 JSON。虽然可以通过在左侧添加 { 来解析它，但在 : 之前的单词字符周围添加 " 和 JSON.parse-ing:

// const { hash } = window.location;
// const badJSON = '{' + hash.slice(1);
// now, you'll have:
const badJSON = '{' + 'access_token: "accessToken", refresh_token: "refreshToken"}';
const json = badJSON.replace(/\w+(?=:)/g, '"$&"');
const obj = JSON.parse(json);
console.log(obj.access_token);
console.log(obj.refresh_token);

这是非常尴尬的，并且是 X/Y 问题的解决方案。最好修复生成 URL 的任何内容，使其格式为标准格式，以便您可以使用 URLSearchParams 解析它。例如，URL 应该类似于

http://localhost:3000/?access_token=accessToken&refresh_token=refreshToken

然后就可以很容易地解析它:

const url = 'http://localhost:3000/?access_token=accessToken&refresh_token=refreshToken';
const params = new URLSearchParams(url.match(/\?.*/)[0]);

// in your real code, the above can be replaced with:
// const params = new URLSearchParams(window.location.search);

console.log(params.get('access_token'));