使用axios发送ajax请求时如何添加token？答案

【问题标题】：How to add token when using axios to send an ajax request?使用axios发送ajax请求时如何添加token？
【发布时间】：2017-04-10 01:21:13
【问题描述】：

我正在使用 Laravel 5.3 和 vue.js 2.0，
我使用 axios (https://github.com/mzabriskie/axios) 发送 ajax 请求，
我按照文档将TOKEN 设置为这样：

<script>

    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  //The error is at this line.

    new Vue({
        el: "#app",
        data: function () {
            return {
                items: []
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                axios.get('/articles').then(function (response) {
                    response.data.forEach(function (item) {
                        item.selected = false;
                    });
                    this.items = response.data;
                }).catch(function (error) {

                    console.log(error);
                });
            });
        }
    });
</script>

控制台报错如下：

Uncaught ReferenceError: AUTH_TOKEN is not defined

我该怎么办？

【问题讨论】：

标签： ajax laravel vue.js axios

【解决方案1】：

你在窗口上设置AUTH_TOKEN了吗？如果不是window.AUTH_TOKEN，自然不会被定义。

在 laravel 应用程序头部的常见设置是：

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

因此，这将设置 csrf 令牌。我不认为这就是你设置 Auth 令牌的方式，所以你可能只需要看看你为什么打电话给window.AUTH_TOKEN

就生成令牌的方式而言，这取决于您需要的类型，但一旦您拥有它，您可能想要查看vuex 来存储它。这样做将允许您在整个应用程序中访问它，而无需在窗口上存储任何内容。

【讨论】：

我对laravel不太了解，我们需要使用JSON.parse("<?php echo ...?>")而不是<?php echo ...?>吗？
echo json_encode() 会将 php 数组转换为输出 JSON 对象，因此可以正常工作。这里的问题似乎很简单，AUTH_TOKEN 没有在任何地方设置。我给出了这个脚本标签作为示例，如果全局 js 变量需要服务器端解析，如何在 Laravel 中设置它们。
啊！我在上一条评论中一直使用这种方法，从没想过输出的 json 字符串已经是有效的 javascript 对象文字...

【解决方案2】：

应该是

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

你可以删除

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

部分

【讨论】：