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

低代码表单FormCreate中为了确保所有的接口请求都包含认证 Token,您可以重写内置的请求方法,并在请求前动态地设置 Token。这不仅确保了请求的安全性,也使得 Token 的管理更加集中和一致。

源码地址: Github | Gitee | 帮助文档

重写内置请求方法并设置 Token

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

js 复制代码
formCreate.fetch = (options) => {
    // 获取或生成 Token
    const token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取


// 设置请求头,附加 Authorization token
    const headers = {
        ...options.headers,
        Authorization: `Bearer ${token}`,
    };


// 发起请求
    fetch(options.action, {
        method: options.method || 'GET', // 默认请求方法为 GET
        headers: headers,                 // 包含 Authorization 的请求头
        body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法,添加请求体
    })
    .then(response => response.json())  // 解析响应为 JSON
    .then(data => {
        if (options.onSuccess) {
            options.onSuccess(data);  // 成功回调
        }
    })
    .catch(error => {
        if (options.onError) {
            options.onError(error);  // 失败回调
        }
    });
};

在请求前设置 Token

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

html 复制代码
<template>
    <form-create :rule="rule" v-model:api="fApi" :option="options" />
</template>

<script setup>
    import { ref } from 'vue';
    const fApi = ref({});
    const options = {
        // 在请求发送前的钩子
        beforeFetch: (options) => {
            // 动态设置请求头中的 Authorization token
            const token = 'your-auth-token'; // 这里的 token 可以从任何存储中获取
            options.headers = {
                Authorization: `Bearer ${token}`
            };
        }
    };
    const rule = [
        {
            type: 'select',
            field: 'product',
            title: '选择产品',
            fetch: {
                action: '/api/products',
                to: 'options',
                parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),
                onError: (error) => console.error('加载产品数据失败:', error),
            },
        }
    ];
</script>
相关推荐
算家计算1 小时前
国产大模型问鼎全球:混元图像3.0登顶文生图榜单的启示
人工智能·开源·资讯
云雾J视界3 小时前
开源革命下的研发突围:Meta Llama系列模型的知识整合实践与启示
meta·开源·llama·知识管理·知识整合·知识迭代·知识共享
ajassi20008 小时前
开源 C++ QT QML 开发(七)自定义控件--仪表盘
c++·qt·开源
说私域12 小时前
新零售升维体验商业模式创新研究:基于开源AI大模型、AI智能名片与S2B2C商城小程序的融合实践
人工智能·开源·零售
明月(Alioo)12 小时前
用AI帮忙,开发刷题小程序:从零开始,构建微信小程序答题系统
微信小程序·开源·aigc
IvanCodes1 天前
RTX 4090 加速国产 AIGC 视频生成:腾讯混元与阿里千问开源模型
人工智能·开源·aigc·音视频
说私域1 天前
定制开发开源AI智能名片S2B2C商城小程序的会员制运营研究——以“老铁用户”培养为核心目标
人工智能·小程序·开源
俺会hello我的1 天前
舒尔特方格开源
前端·javascript·开源
ajassi20001 天前
开源 C++ QT QML 开发(五)复杂控件--Gridview
c++·qt·开源
说私域1 天前
公域流量转化困境下开源AI智能名片与链动2+1模式的S2B2C商城小程序应用研究
人工智能·小程序·开源