Laravel + Vue应用中CSRF令牌配置错误及解决方案

本文旨在解决Laravel与Vue.js集成时常见的CSRF令牌配置错误，特别是由于函数名拼写错误`csfr_token()`导致的`Undefined function`问题。我们将详细阐述如何在Blade模板中正确暴露CSRF令牌给前端JavaScript，并在Vue组件中通过HTTP请求头使用它，确保应用程序的安全性和功能正常运行。

理解Laravel中的CSRF保护

跨站请求伪造（CSRF）是一种恶意攻击，它诱导用户在不知情的情况下执行他们已认证的Web应用程序中的操作。Laravel框架内置了强大的CSRF保护机制，通过为每个用户会话生成一个唯一的“令牌”来防止此类攻击。当用户提交表单或发起AJAX请求时，Laravel会验证请求中是否包含有效的CSRF令牌。如果令牌缺失或不匹配，请求将被拒绝。

在Laravel中，我们通常使用csrf_token()辅助函数来生成并获取当前的CSRF令牌。这个令牌需要被包含在所有POST、PUT、PATCH和DELETE请求中。

将CSRF令牌暴露给前端JavaScript

对于使用JavaScript框架（如Vue.js）进行前端开发的Laravel应用，我们需要将CSRF令牌从Blade模板传递到前端JavaScript环境中。一种常见且推荐的做法是在全局window对象上设置一个属性来存储这个令牌。

立即学习“前端免费学习笔记（深入）”；

以下是在Blade模板（例如welcome.blade.php）中正确配置CSRF令牌的示例：

<script>
    (function () {
        window.Laravel = {
            csrfToken: '{{ csrf_token() }}' // 注意：这里是 csrf_token()
        };
    })();
</script>

这段代码会在页面加载时执行一个立即执行函数，将当前会话的CSRF令牌赋值给window.Laravel.csrfToken。这样，前端的Vue组件或其他JavaScript代码就可以方便地访问到这个令牌。

蚂蚁PPT

AI在线智能生成PPT

113

查看详情

常见的拼写错误及其影响

在实际开发中，一个非常常见的错误是将csrf_token()误写为csfr_token()。这个细微的拼写错误会导致Laravel抛出Symfony\Component\Debug\Exception\FatalThrowableError Call to undefined function csfr_token()的致命错误。这是因为csfr_token()函数在Laravel中并不存在，从而导致PHP无法找到并执行该函数。

一旦出现这种错误，整个Blade视图的渲染过程就会中断，页面将无法正常显示，并且会明确指出是welcome.blade.php文件中的该函数调用导致的问题。

在Vue组件中使用CSRF令牌

获取到CSRF令牌后，前端Vue组件在发起需要CSRF保护的HTTP请求时，需要将此令牌包含在请求头中。通常，这通过X-CSRF-TOKEN或X-XSRF-TOKEN头来实现。Laravel默认检查X-CSRF-TOKEN。

以下是一个Vue组件中使用window.Laravel.csrfToken进行文件上传的示例：

<template>
    <Modal
        v-model="addModal"
        title="Add Category"
        :mask-closable="false"
        :closable="false"
    >
        <Input v-model="data.tagName" placeholder="Add Category Name" style="width: 300px" />
        <div class="space"></div>
        <Upload
            type="drag"
            :headers="{'x-csrf-token' : token}" // 使用从window对象获取的令牌
            action="/app/upload"
        >
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click or drag files here to upload</p>
            </div>
        </Upload>
        <div slot="footer">
            <Button type="default" @click="addModal = false">Close</Button>
            <Button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Adding..' : 'Add Tag'}}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    data() {
        return {
            addModal: false,
            data: {
                tagName: ''
            },
            isAdding: false,
            token: window.Laravel.csrfToken // 在组件数据中引用全局令牌
        }
    },
    methods: {
        addTag() {
            // 示例方法，实际的添加标签逻辑
            console.log('Adding tag:', this.data.tagName);
            this.isAdding = true;
            // 假设这里会发起一个POST请求，请求头中已包含CSRF令牌
            setTimeout(() => {
                this.isAdding = false;
                this.addModal = false;
            }, 1000);
        }
    }
}
</script>

在这个Vue组件中：

1. token: window.Laravel.csrfToken 将全局可用的CSRF令牌赋值给组件的token数据属性。
2. Upload组件的:headers属性绑定了一个对象，其中'x-csrf-token'键的值就是我们从window.Laravel.csrfToken获取到的令牌。这样，每次文件上传请求都会自动带上正确的CSRF令牌。

总结与注意事项

• 严格检查拼写： 确保在Blade模板中使用csrf_token()而不是csfr_token()。这是最常见的错误源。
• CSRF保护的重要性： 始终在所有修改数据的非GET请求中包含CSRF令牌，以保护您的应用程序免受恶意攻击。
• 前端框架集成： 无论是Vue、React还是其他前端框架，通过全局对象（如window.Laravel）将CSRF令牌暴露给前端是一种标准且安全的方法。
• 官方文档： 在遇到不确定问题时，查阅Laravel官方文档是解决问题的最佳途径。官方文档详细说明了CSRF保护的机制和正确的使用方法。

通过遵循这些最佳实践，您可以有效地在Laravel和Vue.js应用程序中实现CSRF保护，并避免因简单拼写错误导致的功能中断。

以上就是Laravel + Vue应用中CSRF令牌配置错误及解决方案的详细内容，更多请关注php中文网其它相关文章！