How in vue-resource read store setters value?

Question

In my vue/cli 4/vuex / vue-resource project I read data from protected area with passport from backend api as in routes/api.php:

Route::group(['middleware' => 'auth:api',  'prefix' => 'adminarea', 'as' => 'adminarea.'], function ($router) {
    ...
    Route::get('dashboard', 'API\Admin\DashboardController@index');

I found how to set access token at vue-resource interceptor for auth headers

and in src/main.js I added method :

Vue.http.interceptors.push((request, next) => {   
/*
  console.log('request::')
  console.log(request)

  console.log('this::')
  console.log(this)

  console.log('Vue::')
  console.log(Vue)

  console.log('Vue.$store::')
  console.log(Vue.$store)

  console.log('Vue.$store.getters.token::')
  console.log(Vue.$store.getters.token)
*/

  request.headers.set('Authorization', 'Bearer XXX key')
  request.headers.set('Accept', 'application/json')
  next()
})

and it works for me if I fill bearer token manually, but I did not find how to read it from store? In my code above I failed to read $store.getters value... Which is the valid way ?

UPDATED BLOCK # 1: If in src/main.js I comment line :

import store from './store'

and add line :

import store from './store.js';

then in console I got error :

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                           12:55:54 PM

This relative module was not found:

* ./store.js in ./src/main.js

But with

import store from './store'

I failed get access to store data

Thanks!

score 1 · Accepted Answer · answered Jan 16 '20 at 08:26

1

Try importing your Vuex file instead of trying to access the $store via the Vue instance.

import store from './store.js';

Vue.http.interceptors.push((request, next) => {   
      request.headers.set('Authorization', `Bearer ${store.getters.token}`)
      request.headers.set('Accept', 'application/json')
      next()
})

answered Jan 16 '20 at 08:26

C.Christensen

386
4
8

Please, look UPDATED BLOCK # 1: – Petro Gromovo Jan 16 '20 at 10:59
Did you add the token variable to your store.state (e.g. store.state.token)? Also, what does your folder structure and your Vuex file look like? – C.Christensen Jan 16 '20 at 12:45

score 0 · Answer 2 · answered Jan 16 '20 at 14:57

I found decision in writing token into localStorage on login and

reading this value from ue.http.interceptors.push((request, next) => { 
  let token = localStorage.getItem('token')
  request.headers.set('Authorization', 'Bearer '+token)
  request.headers.set('Accept', 'application/json')
  next()
})

That works for me!

How in vue-resource read store setters value?

2 Answers2