Open maryheng opened 7 years ago
@maryheng This version is still using vue-resource
internally, so you'll have to follow vue-resource
instruction.
@ratiw Hi, I have already changed from axios to using vue-resource. I'm able to get data from my server, with a token passed in (using vue-resource).
However, i'm still unsure how to pass in the token to the api-url from vue-table. How do I go about passing in a token while using vuetable-2?
Using http-option? https://ratiw.github.io/vuetable-2/#/Vuetable-Properties?id=-http-options But i'm not sure how to use http-option either, any sample code?
loadData () {
this.$http.get(staffUrl, this.httpOptions)
.then(response => {
console.log(response)
}, (response) => {
console.log(response)
})
}
@maryheng Looks like you're using a forked version of vuetable, so I'm not sure whether this will work for you or not.
First, if you need to use interceptor, you can do that with vue-resource as well. See here. This post also has a code snippet.
If you think httpOptions
is the way to go, you can find the vue-resouce doc here describing each option available.
@ratiw I'm able to get the data from the server by passing in the token to the server, using vue-resource's interceptors, which is placed in main.js (using it globally), as you can see from the section below the errors in the image. However, for some reason, i cannot pass in the token using the vuetable-2 (see the 1st section of the image with errors).
This is the code that uses api-url to fetch data from the server.
<vuetable
ref="vuetable"
api-url="http://localhost:3000/api/staffs"
:load-on-start = "loadOnStart"
:fields="['userId', 'name', 'username']"
></vuetable>
// vue-resource interceptor to pass in token to request headers
Vue.http.interceptors.push((request, next) => {
var accessToken = window.localStorage.getItem('access_token')
request.headers.set('x-access-token', accessToken)
next()
})
Any idea why i can't pass in the token for the vuetable-2?
@maryheng What version of Vuetable you're using exactly?
Vuetable 1 uses vue-resource, therefore you must use vue-resource's interceptor. However, Vuetable-2 uses axios
instead of vue-resource, so you'll have to use axios's interceptor.
You cannot use vue-resource's interceptor in Vuetable-2, because it no longer uses vue-resource.
@ratiw Sorry for the trouble! I forgot to state I was using Vuetable-2. Now I have changed back to using Axios to suit Vuetable-2. I'm able to intercept the headers with the token and retrieve data from the server. However, I'm still unable to retrieve data using api-url, Vuetable-2.
Here is the image:
Here is the code to pass in the token to the headers to every request:
// Global axios default (config default that will be applied to every request)
var accessToken = window.localStorage.getItem('access_token')
axios.defaults.baseURL = 'http://localhost:3000/'
axios.defaults.headers.common['x-access-token'] = accessToken
Am i missing out on anything? :/
@maryheng The error just said that you're not authorized to access the resource. You need to inspect the request header whether your access token was really attached inside the header.
Hi, i have got this problem where if i want to get data from my server, i have to supply a token. Hence, in my other get/post request, i'm able to use axios interceptor and axios get/post to do it. However, i'm not sure how to go about getting data from my server with the token in the headers with vue-table, api-url. I was reading the properties for vue-table and i came across, http-options, but i'm not sure how to use it correctly.
Thanks for your help! Really need this to work!