How to use http-options?

[maryheng]

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.

  <vuetable
    ref="vuetable"
    api-url="http://localhost:3000/api/staffs"
    :http-options = "httpOptions"
    :load-on-start = "loadOnStart"
    :fields="['userId', 'name', 'username']"
  ></vuetable>

  props: {
    httpOptions: {
      type: Object,
      default () {
        return {}
      }
    }.....

  methods: {
    loadData () {
      axios.interceptors.request.use(config => {
        var accessToken = window.localStorage.getItem('access_token')
        config.headers = { 'x-access-token': accessToken }
        console.log(config.headers)
        return config
      })
      axios.get(staffUrl, this.httpOptions)
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    },..............

Thanks for your help! Really need this to work!

[ratiw]

@maryheng This version is still using vue-resource internally, so you'll have to follow vue-resource instruction.

[maryheng]

@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)
      })
    }

[ratiw]

@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.

[maryheng]

@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?

[ratiw]

@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.

[maryheng]

@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? :/

[ratiw]

@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.