[Vuejs]-Nuxt middlewares does not work when page reloaded

by

0👍

Here is the documentation for the middlewares: https://nuxtjs.org/docs/2.x/directory-structure/middleware/

Few steps to have a working middleware:

  • use it only in a page (/pages/hello.vue) or layout (/layouts/MyFancyLayout.vue)
  • put the middleware in the proper directory (/middleware/test.js)
  • call it properly in the .vue file like middleware: 'test'

You can also try to debug and see if something like this works

export default {
  middleware() {
    console.log('working!')
  }
}

It is working on client transitions and should be good on initial page load aswell.

-1👍

As a more accurate way, you should do this in the Vuex Store using the ‘context’ attribute.

middleware/auth.js

export default function(context) {

if (process.client) {
    context.store.dispatch('initAuth', null);
}
context.store.dispatch('initAuth', context.req);

}

store/index.js

import Cookie from 'js-cookie'

store/index.js

            actions:{
              initAuth(vuexContext,state){
            let token;
            let jwtCookie;
            

            if (req) {
                if (!req.headers.cookie) {
                    return;
                }
                jwtCookie = req.headers.cookie
                    .split(";")
                    .find(c => c.trim().startsWith("jwt="));
                if (!jwtCookie) {
                    return;
                }
                token = jwtCookie.split('=')[1];
                
            } else {
                token = localStorage.getItem('token');
               

            }
            vuexContext.commit('setToken', token);
            return $axios.post('https://example.com/api', {
            email: Buffer.from(AUTH_TOKEN[0], 'base64').toString(),
            password: Buffer.from(AUTH_TOKEN[1], 'base64').toString(),
            }).then(response => {
            vuexContext.commit('changeAuthStatus', {
            authStatus: true,
            userData: {
            id: response.data.id,
            login: response.data.login,
            email: response.data.email,
            firstName: response.data.first_name,
            lastName: response.data.last_name,
            }
          })
       })
      }
     }

this way it will work smoothly and understandably

Leave a comment