开源项目低代码表单FormCreate重写内置的请求方法,实现中间件和附带token ...

低代码表单FormCreate中为了确保全部的接口请求都包含认证 Token，您可以重写内置的请求方法，并在请求前动态地设置 Token。这不仅确保了请求的安全性，也使得 Token 的管理更加会合和同等。
源码地址: Github | Gitee | 资助文档
重写内置请求方法并设置 Token

您可以自定义 formCreate.fetch 方法，以便在每次请求时主动附加 Token。

1. formCreate.fetch = (options) => {
2.     // 获取或生成 Token
3.     const token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取
6. // 设置请求头，附加 Authorization token
7.     const headers = {
8.         ...options.headers,
9.         Authorization: `Bearer ${token}`,
10.     };
13. // 发起请求
14.     fetch(options.action, {
15.         method: options.method || 'GET', // 默认请求方法为 GET
16.         headers: headers,                 // 包含 Authorization 的请求头
17.         body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法，添加请求体
18.     })
19.     .then(response => response.json())  // 解析响应为 JSON
20.     .then(data => {
21.         if (options.onSuccess) {
22.             options.onSuccess(data);  // 成功回调
23.         }
24.     })
25.     .catch(error => {
26.         if (options.onError) {
27.             options.onError(error);  // 失败回调
28.         }
29.     });
30. };

复制代码

在请求前设置 Token

通过 beforeFetch 钩子，您可以在每次请求发送前设置 Token。以下是如何在 Vue 组件中利用这个钩子：

1. <template>
2.     <form-create :rule="rule" v-model:api="fApi" :option="options" />
3. </template>
5. <script setup>
6.     import { ref } from 'vue';
7.     const fApi = ref({});
8.     const options = {
9.         // 在请求发送前的钩子
10.         beforeFetch: (options) => {
11.             // 动态设置请求头中的 Authorization token
12.             const token = 'your-auth-token'; // 这里的 token 可以从任何存储中获取
13.             options.headers = {
14.                 Authorization: `Bearer ${token}`
15.             };
16.         }
17.     };
18.     const rule = [
19.         {
20.             type: 'select',
21.             field: 'product',
22.             title: '选择产品',
23.             fetch: {
24.                 action: '/api/products',
25.                 to: 'options',
26.                 parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),
27.                 onError: (error) => console.error('加载产品数据失败:', error),
28.             },
29.         }
30.     ];
31. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。