vue中页面input输入的内容是一个js函数或表达式，如何让其生效？

Z时代
2024-03-13
分类：IT

有一个需求，需要给不同的类目赋值动态的调用接口并处理它的返回值。
比如说有个类目叫三年2班的所有学生，我需要给它绑定一个接口地址，接口调用方式，接口入参以及返回值的处理逻辑，并且把它存进数据库，下次用的时候直接调用，页面上是这样的：
vue中页面input输入的内容是一个js函数或表达式，如何让其生效？
正常情况下，的处理是

request(地址，get，入参）.then(res=>{
     return res.data})

但是由于需要页面传值，导致接口返值定义这里输入的是字符串，所以怎么可以让我输入的字符串达到表达式的效果呢
vue中页面input输入的内容是一个js函数或表达式，如何让其生效？
这个要怎么解决呢

回答：

emmm……来了一个不怕死的。你可以考虑用 eval() - JavaScript | MDN

但是最重要的一句我还是要说一下：

永远不要信任用户的输入

Edit

想了想，还是给一个比较靠谱的建议把，你可以让用户选择使用哪一个属性值，而不是一段可执行的JS。
比如说你现在需求中的 res.data 中的 data。那么让用户键入 data 就行了，然后你返回的时候 return res[userValueKey] 这样处理就可以了

// 举例获取用户输入的 userValueKey
const userValueKey = 'data'
// 请求接口
request(apiUrl, 'get', {...params}).then(res=>{
   return res[userValueKey]})

如果用户端输入的正确，那么自然有正确的返回值，如果不合规自然不会有返回值。这样实现的结果和你的需求的业务逻辑其实时一样的。

最多再增加一些兜底，比如说增加一个是否会 undefinded 的判断，如果没有找到，则提示用户维护的接口返回属性值错误

回答：

首先看了你的问题描述，我感觉你的需求是不是想要把接口返回的json，也就是你所谓的res.rows展示在输入框里，如果是，下面我说的你可以作为参考
1.先把实际的res.rows的值拿到也就是后端返回的JSON,之后在data中存起来,或者存到VueX都行，存的时候给这个res.rows记得JSON.stringfy一下
2.然后你存的时候，比如this.responseData=JSON.stringfy(res.rows)
3.存完了，v-model的时候直接绑定这个responseData,应该回显后就是你想要的结果了

回答：

诚如楼上所言，eval() 是不应该使用的，它的风险远大于功能（详情自行百度 xss攻击 ）

不改其他代码的方案

如果题主已经明确需要的只是返回值

这种情况一般依赖于一个固定名称的对象，不然代码无法通用，也就是说需要用户 自定义 的其实只有 属性名（如果是这种情况那就简单了）

// 我想题主应该是这个意思吧？
const classes = {
    data: 'xxx'
}
// 接口返回值定义直接写 data，于是就变成了
request(地址，get，入参）.then(res=>{
    // 假设 res.data 存放着需要返回的变量名 data
    // 好处是无法被 xss 攻击，不用写额外的过滤代码
     return classes[res.data]})

如果题主的意思是执行任意的 js 表达式，那恐怕只有 eval 和 Function 能满足需求，但他们都可能导致 xss 攻击，这种情况在执行前，一定要过滤传过来的字符串，具体过滤什么百度 xss 前端防御措施即可（当然由后端负责过滤可以从源头上消除问题）