How to use store in Vue/ Nuxt plugin?

Question

I am writing a nuxt app that authenticates with a backend. I have a http plugin that intercepts all http requests. I need to add an auth token to all requests, the token is in the store. What I want to know is, how do I access the store from the plugin?

import axios from 'axios';

var api = axios.create({
   baseURL: 'http://127.0.0.1:8000/api/'
});

api.interceptors.request.use(function (config) {
    config.headers = {
        'Authorization': 'Bearer' + **how do access store?**
    }

    return config;
 }, function (error) {
       return Promise.reject(error);
 });

export default api;

Thanks

Check this guide nuxtjs.org/guide/vuex-store or example nuxtjs.org/examples/auth-routes — Adriano Resende
– Adriano Resende, Commented May 8, 2018 at 14:51

Vladislav Gritsenko · Accepted Answer · 2018-05-08 14:57:37Z

1

You can try to use app store from context in plugin. Your plugin need some changes:

import axios from 'axios';

var api = axios.create({
   baseURL: 'http://127.0.0.1:8000/api/'
});

export default (context, inject) => {
  api.interceptors.request.use(function (config) {
    config.headers = {
        'Authorization': 'Bearer' + context.app.$store.state.your_path_to_token
    }

    return config;
  }, function (error) {
       return Promise.reject(error);
  });

  return api;
}

One more way it's create store/index.js file and import them into plugin.

edited May 8, 2018 at 14:57

answered May 8, 2018 at 14:52

Vladislav Gritsenko

8235 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use store in Vue/ Nuxt plugin?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related