侧边栏壁纸
博主头像
叩钉壹刻博主等级

7分技术,3分管理,2分运气

  • 累计撰写 28 篇文章
  • 累计创建 13 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

JavaScript解析URL请求参数和替换

鹿心肺语
2024-01-14 / 0 评论 / 0 点赞 / 52 阅读 / 3760 字

缘起

最开始在使用固定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);

运行结果:

image-20240114123838

总结

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

0

评论区