Vue.js2 - 如何从嵌套组件设置全局标题答案

【问题标题】：Vue.js2 - How to set a global header from a nested componentVue.js2 - 如何从嵌套组件设置全局标题
【发布时间】：2019-01-25 20:53:24
【问题描述】：

我通过 Vue cli 使用 simple-webpack 结构制作了 vue 项目。我使用 Vue 资源 和 vue 路由 以及当我为用户发送正确凭据时向我发送授权令牌的 API。

如何使令牌位于该用户将发出的所有下一个请求的标头中。

现在我找到了一种将令牌保存到本地存储并在每个请求的标头中发送的方法 {标头：{授权：localStorage.Authorization}} 但我发现它并不干燥而且非常令人沮丧。

此外，我找到了Vue.http.headers.common['Authorization'] = 'token...' - 我想知道如何实现从登录请求到此全局实例的令牌。

我也找到了这种方法 - Vue.http.interceptors.push((request, next) => {// setting the header}); 但不明白我什么时候应该实现这个或如何将数据从组件发送到这个对象。

【问题讨论】：

看第二个答案-stackoverflow.com/questions/36315389/…
正如我在问题中提到的。我见过这种方法，我如何从组件中配置Vue.http.interceptors.push((request, next) => {// setting the header});？
这些配置覆盖是全局的，因此您必须将其设置在所有组件范围之外，它将应用于所有 XHR 调用（例如 - 在 app.js 文件中）
如果我不清楚，我很抱歉，我明白你的意思，但不知道如何从组件将数据（令牌）发送到此配置。正如我在问题的最后一句话中提到的那样。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

经过大量研究，我发现 Vue-resource 不再是官方包，而是 Axios 包。

Vue 资源包仍在工作，并将继续由其创建者维护。

我已经迁移到 Axios ajax 处理包并使用 axios 配置，它就像魔术一样工作。我已将此行添加到 main.js 文件中。

axios.defaults.headers.common['Auth'] = localStorage.Auth;

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios); [...]// somecode axios.defaults.headers.common['Auth'] = localStorage.Auth; [...]//some code

然后从登录方法 - 在axios.post('url').then(response=>{ // set the localstorage})

这将更新本地存储，并且与 v-bind 指令相同，全局配置将被更新，并且从现在开始所有请求的标头都将具有此令牌。

【讨论】：