Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

[Nuxt.JS]access the $auth object in the context from plugin js

Tags:

axios

nuxt.js

I want to access the $auth object in the context from the js defined under 'plugins/', but I can't.


https://auth.nuxtjs.org/api/auth.html#auth

This module globally injects $auth instance, meaning that you can access it anywhere using this.$auth. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$auth


It is described above, but my code (axios-interceptor.js) cannot access $auth from context (it is undefined). What does it take to be able to access it?

plugins/axios-interceptor.js

export default function (context) {
  const { $axios, route, redirect } = context

  $axios.interceptors.response.use(
    function (response) {
      return response
    },
    function (error) {
      const code = parseInt(error.response && error.response.status)
      const thisRoutePath = route.path

      if ([401, 403].includes(code)) {
        if (thisRoutePath !== '/') {
          redirect('/?login')
        }
      }
      return Promise.reject(error)
    }
  )
}

nuxt.config.js

export default {
  plugins: [
    '@/plugins/axios-interceptor.js'
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/auth'
  ],
  axios: {
    baseURL: BASE_URL
  },
  auth: {
    cookie: false,
    autoFetchUser: false,
    redirect: {
      login: '/login',
      logout: '/login',
      callback: '/callback',
      home: '/home'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: BACKEND_API_PATH_BASE + '/api/v1/login/', method: 'post', propertyName: 'token' },
          user: { url: BACKEND_API_PATH_BASE + '/api/v1/users/me', method: 'get', propertyName: false },
          logout: false
        },
      },
    }
  },
  router: {
    middleware: [
      'auth'
    ]
  },

The reason I want to access $auth in axios-interceptor.js is that I want to execute $auth.logout() in the if ([401, 403].includes(code)) { block and remove the token.

like image 544
isoittech Avatar asked May 09 '20 13:05

isoittech


People also ask

What is Nuxt JS context?

The context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like asyncData , fetch , plugins , middleware and nuxtServerInit . Note: "The Context" we refer to here is not to be confused with the context object available in Vuex Actions .


1 Answers

I am now able to access $auth by doing the following

export default {
  // plugins: [
  //   '@/plugins/axios-interceptor.js'  ########### REMOVE ###########
  // ],
    :
  (Ommit)
    :
  auth: {
      :
    (Ommit)
      :
    plugins: [
      '@/plugins/axios-interceptor.js'  // ########### ADD ###########
    ]
  },
  (Ommit)
      :
}

The things I needed to do were listed below.
https://auth.nuxtjs.org/recipes/extend.html

like image 68
isoittech Avatar answered Jan 03 '23 05:01

isoittech