JavaScript解析URL请求参数和替换

缘起

最开始在使用固定URL，请求某个固定地址，这样请求没有问题。突然有一天提出：能不能给我按照当前人进行查询。喵的，原本的不就好好的，非得要按照当前人进行查询。沟通后发现，之前给设置固定链接给的权限很高，要做权限控制。在URL对应的系统中某些人还没有查看的权限，固定死，就相当于所有人都能看，不符合要求。想想也对，然后就改叭改叭。

定位前端写的访问代码，发现是在后台做了URL配置，然后前端进行获取。那就我再加配置呗，将这URL死东西，改活呗。这就要涉及到对URL的解析和值替换了呗。

调整

由于是在前端，用JavaScript解析URL中的查询参数，就可以使用URL和URLSearchParams的相关接口。

举个URL例子：

let url = "https://127.0.0.1/api/form.html?username=demo&password=demo&otherInfo=others";

要对这个URL进行解析，那么首先就得要封装一下，先变成URL对象呗：

let URLUtils = new URL(url);

有了这个URL对象，那么就需要解析出?之后的参数：

// 对象数组（Key，Value）
let params = URLUtils.searchParams;

解析出?之后的参数，到这一步，那不就是随心所欲了：

// 获取?号及后面的值
console.log(URLUtils.search);
// 运行结果：?username=11111&password=demo&otherInfo=others&otherInfo=others2

// 获取参数个数
console.log(params.size) // 运行结果：3

// 遍历参数
for (let [key, value] of params) {
    console.log(`参数名称: ${key}, 参数值: ${value}`);
}
// 运行结果：
// 参数名称: username, 参数值: demo
// 参数名称: password, 参数值: demo
// 参数名称: otherInfo, 参数值: others

// 获取某个参数值
console.log(params.get("password")); // 运行结果：demo

// 修改参数的值
params.set("username", "11111");
console.log(URLUtils.toString()); 
// 运行结果：https://127.0.0.1/api/form.html?username=11111&password=demo&otherInfo=others

// 新增某个参数，不会替换，只能追加
params.append("otherInfo1", "others1");
console.log(URLUtils.toString());
params.append("otherInfo", "others2");
console.log(URLUtils.toString());
// 运行结果：https://127.0.0.1/api/form.html?username=11111&password=demo&otherInfo=others&otherInfo1=others1
// 运行结果：https://127.0.0.1/api/form.html?username=11111&password=demo&otherInfo=others&otherInfo1=others1&otherInfo=others2

// 删除某个参数
params.delete("otherInfo1");
console.log(URLUtils.toString());
// 运行结果：https://127.0.0.1/api/form.html?username=11111&password=demo&otherInfo=others&otherInfo=others2

到这里了，那就看一个完整示例呗：

let url = "https://127.0.0.1/api/form.html?username=demo&password=demo&otherInfo=others";

let URLUtils = new URL(url);
let params = URLUtils.searchParams;

// 获取参数个数
console.log(params.size)
// 遍历参数
for (let [key, value] of params) {
    console.log(`参数名称: ${key}, 参数值: ${value}`);
}

// 获取某个参数值
console.log(params.get("password"));

// 修改参数的值
params.set("username", "11111");
console.log(URLUtils.toString());

// 新增某个参数，不会替换，只能追加
params.append("otherInfo1", "others1");
console.log(URLUtils.toString());
params.append("otherInfo", "others2");
console.log(URLUtils.toString());

// 删除某个参数
params.delete("otherInfo1");
console.log(URLUtils.toString());

// 获取?号及后面的值
console.log(URLUtils.search);

运行结果：

总结

一般系统交互，为了设置免密登录，可能就会提供某个链接地址。提供方为了控制访问权限，那么就需要和当前操作人进行绑定，所以这个链接URL就得动态变化。故此前端请求时就可以采用上述方式进行动态替换。