vue中加载证书的问题

Question

问题描述：我目前的项目前端用的是vue2, 后端使用的是ABP,我的目的是想在前后端都进行证书的加载，
后端我是这样加载证书的，在StartUp.cs中添加以下的代码

public IServiceProvider ConfigureServices(IServiceCollection services)
{
     services.AddDataProtection()
        .PersistKeysToFileSystem(new System.IO.DirectoryInfo(@"c:\KeyFolder"))
        .SetApplicationName("SharedAppName")
        .ProtectKeysWithCertificate(GetCertificate());
}
// 获取证书
private X509Certificate2 GetCertificate()
{
    var assembly = typeof(Startup).GetTypeInfo().Assembly;
    using (Stream stream = assembly.GetManifestResourceStream(assembly.GetManifestResourceNames().First(r => r.EndsWith("web.pfx"))))
    {
        try
        {
            Byte[] raw = new Byte[stream.Length];
            for (Int32 i = 0; i < stream.Length; i++)
            {
                raw[i] = (Byte)stream.ReadByte();
            }
            X509Certificate2 cert = new X509Certificate2(raw, "34827729", X509KeyStorageFlags.MachineKeySet);
            return cert;
        }
        catch (Exception e)
        {
            return null;
        }
    }
}

后端怎样添加证书呢，我百度了一下，大概是这样做的：

import axios from 'axios'
const path = require('path')
const fs = require('fs')  //node.js的文件系统
const https = require('https')

//读取证书文件
var pfx = fs.readFileSync(path.join(__dirname, 'src/ssl/web.pfx')) //这一步报错，“不是有效的函数”
const cretPwd = '34827729'
//依据证书创建https agent
const agent = new https.Agent({
   pfx,
   passphrase: cretPwd
})
// 创建axios实例,里面使用的是htts agent(带证书)
const service = axios.create({
  baseURL: window.configData.VUE_APP_BASE_API,
  httpsAgent: agent
})

。。。

readFileSync处报错，提示“不是有效的函数”，我百度了一下，大概意思是说：
这里的fs是node.js的文件系统，只能适用于操作系统，不能用于浏览器中
换言之也就是要使用浏览器专用的文件系统才不会报错

我的问题：
1.怎样在vue中使用浏览器文件系统呢，果真能解决这个问题吗？
2.大家又是怎样在vue中加载证书的呢，恳请具体的代码片断或解决方案

Answer 1

chatgpt:不喜勿喷
在 Vue 中，您可以使用浏览器的 File API 来读取本地文件，而不是使用 Node.js 的文件系统模块。您可以通过以下代码实现

const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = '.pfx' // 根据您的证书类型设置 accept 属性
fileInput.onchange = event => {
  const file = event.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = () => {
    const certBuffer = new Uint8Array(reader.result)
    // 在这里使用 certBuffer 来加载证书
  }
}
fileInput.click()

这里的代码会创建一个隐藏的 <input type="file" /> 元素，并设置它的 accept 属性为您的证书类型。当用户选择了一个文件后，它会读取文件内容并将它转换成一个 Uint8Array，您可以将这个数组传递到您的后端以进行证书加载。

在 Vue 中加载证书，您可以使用 axios 库来发出带证书的 HTTPS 请求。以下是一个示例代码片段：

import axios from 'axios'
import certBuffer from './path/to/your/certificate/file' // 请根据您的实际情况设置路径

const cretPwd = '34827729'

// 将证书转换为一个 Blob 对象
const certBlob = new Blob([certBuffer])

// 创建一个 FormData 对象，将证书添加到其中
const formData = new FormData()
formData.append('cert', certBlob)

// 发出带证书的请求
const response = await axios.post('/path/to/your/api', formData, {
  httpsAgent: new https.Agent({
    pfx: certBuffer,
    passphrase: cretPwd
  })
})

// 处理响应

这里的代码使用了 Blob 对象来将证书转换为一个可上传的数据类型，然后将它添加到一个 FormData 对象中。接着，它使用 https.Agent 选项来为 axios 创建一个带证书的 HTTPS 代理，并向您的 API 发送带证书的请求