如何在React函数组件中调用运行PowerShell脚本

核心问题 #

1. 环境不兼容：node-powershell是仅能运行在Node.js服务端的库，依赖Node的系统级API，完全不支持浏览器环境，直接写在前端React组件中会直接报错，无法渲染。
2. 异步逻辑错误：ps.invoke返回的是Promise对象，你没有用await获取异步执行结果，直接把Promise渲染到页面，肯定无法正常展示内容。
3. 架构逻辑错误：浏览器本身出于安全限制，完全不允许前端代码直接调用本地系统的PowerShell，必须通过后端服务中转调用。

实现方案 #

你需要做前后端分离实现，前端React负责触发请求、展示结果，后端写Node接口调用PowerShell脚本后返回结果。

第一步：编写Node.js后端接口 #

先新建Node服务，安装依赖：
npm install express cors node-powershell
服务端代码server.js示例：

const express = require('express');
const cors = require('cors');
const { PowerShell } = require('node-powershell');
const app = express();
const port = 3001;

app.use(cors());
app.use(express.json());

// PowerShell调用接口
app.get('/run-powershell', async (req, res) => {
  try {
    const ps = new PowerShell({
      executableOptions: {
        '-ExecutionPolicy': 'Bypass',
        '-NoProfile': true,
      },
    });
    // 可根据前端传参调整要执行的命令，示例为获取系统服务列表
    const scriptCommand = PowerShell.command`Get-Service`;
    const result = await ps.invoke(scriptCommand);
    // 关闭实例避免内存泄漏
    await ps.dispose();
    res.json({ success: true, data: result.raw });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

启动服务：node server.js

第二步：编写前端React函数式组件 #

前端不要引入node-powershell，通过请求后端接口获取结果即可，组件示例：

import { useState, useEffect } from 'react'

function RunPowerShell() {
    const [result, setResult] = useState('')
    const [loading, setLoading] = useState(false)

    const runScript = async () => {
        setLoading(true)
        try {
            const res = await fetch('http://localhost:3001/run-powershell')
            const data = await res.json()
            if (data.success) {
                setResult(data.data)
            } else {
                setResult(`执行错误：${data.error}`)
            }
        } catch (err) {
            setResult(`请求失败：${err.message}`)
        } finally {
            setLoading(false)
        }
    }

    // 组件挂载时自动执行，也可改为按钮点击触发
    useEffect(() => {
        runScript()
    }, [])

    return (
        <>
            <h3>PowerShell执行结果</h3>
            {loading ? <p>执行中...</p> : <pre>{result}</pre>}
        </>
    )
}

export default RunPowerShell

注意事项 #

• 该方案仅适用于本地开发或者内网私有场景，如果要上线公网，必须对PowerShell命令做严格的白名单限制，绝对不能允许前端传入任意命令执行，否则会有严重的系统安全漏洞。
• 运行Node服务的账号需要满足PowerShell脚本执行的权限要求。

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