vue-resource root 和授权的配置

Question

我正在查看 vue-resource 的以下文档，其中描述了如何设置配置：https://github.com/vuejs/vue-resource/blob/master/docs/config.md

它说要为您的 headers 设置一个通用的授权值：

 Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

我猜这个 "Basic YXBpOnBhc3N3b3Jk" 值只是一个例子，但是这个值是做什么用的，应该用什么来代替它？

在同一页上，我还看到 "root" 的设置：

 Vue.http.options.root = '/root';

我理解这是指网络应用程序的网络 URL。但是，为什么 vue-resource 需要我告诉它这个值呢？它有什么用？

Answer 1

通过将 header 添加到 Vue.http.headers.common object，您告诉 vue-resource 在每个请求中添加这些 header。

您还可以为每个请求添加 headers：

http({
 url: '/someUrl', 
 method: 'GET',
 headers: {
   Authorization: 'Basic YXBpOnBhc3N3b3Jk'
 }
})

关于示例中Authorization header的值：它是一个带有username/password的base64编码字符串。

window.atob('YXBpOnBhc3N3b3Jk') // => "api:password"

如果您在使用vue-resource时需要使用基本身份验证，您应该提供自己的username/password。

请注意，使用您的应用程序的每个人都可以查看 username/password。有关基本身份验证的更多信息，请参阅 https://en.wikipedia.org/wiki/Basic_access_authentication。

root-property 可能是您 REST-service 的主要端点。而不是：

http({
 url: 'http://api.domain.com/v1/someRoute'
});

您可以设置根端点：

Vue.http.options.root = 'http://api.domain.com/v1'

// will call http://api.domain.com/v1/someRoute
http({
 url: '/someRoute'
});

Answer 2

如果你想以全局方式设置header auth 使用inceptor

Vue.http.interceptors.push(function(request, next) {

    request.headers['Authorization'] = 'Basic abcd' //Base64
    request.headers['Accept'] = 'application/json'
    next()
});

并使用选项凭据：

Vue.http.options.credentials = true;

vue-resource root 和授权的配置

Configuration for vue-resource root and authorization

javascript

vue.js

vue-resource