CODEWITHSUNDEEP
javascriptvue.jspluginsnuxt.jsmiddleware
seyet
seyet

Reputation: 1150

using a plugin and store in middleware [Nuxt]

I want to write a middleware that checks the authentication and entitlement of the user. I get the authentication details from my store:

//store/index.js
const state = () => ({
  auth: {
    isLoggedIn: false
    // and so on
  }
});

and the entitlements from a plugin:

//plugins/entitlement.js

  import axios from 'axios';
  export default (context, inject) => {
    const { env: { config: { entitlementUrl } }, store: { state: { auth: { access_token } } } } = context;
  const headers = { 
    Authorization: `Bearer ${access_token}`,
    'Content-Type': 'application/json' 
  };
  inject('entitlement', {
    isEntitled: (resourceId) => new Promise((resolve, reject) => {
      axios.get(`${entitlementUrl}/entitlements`, { headers, params: { resourceId } })
      .then(({ data }) => {
        resolve(data.Count > 0);
      })
      .catch((error) => {
        reject(error);
      });
    })
  };

This is the middleware that I wrote but it doesn't work:

//middleware/isEntitled.js

export default function ({ app, store }) {
  if(store.state.auth.isLoggedIn){
    let isEntitled =  app.$entitlement.isEntitled('someId');
    console.log('entitled? ', isEntitled)
  }
}

And then I add it to my config:

//nuxt.config.js
  router: {
     middleware: 'isEntitled'
  },

I get the error isEntitled of undefined. All I want to do is to check on every page of application to see if the user is entitled! How can I achieve that?

Upvotes: 2

Views: 3690

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1627

If you look at the situation from the plugin side, you can do this:

First create a plugin:

export default ({app}) => {
    // Every time the route changes (fired on initialization too)
    app.router.beforeEach((to, from, next) => {
        if(app.store.state.auth.isLoggedIn){
            let isEntitled =  app.$entitlement.isEntitled('someId');
            console.log('entitled? ', isEntitled)
        }
        return next();
    })
}

then add the plugin to your nuxt.config.js file:

plugins: [
    '~/plugins/your-plugin.js',
],

Upvotes: 1

Related Questions