CODEWITHSUNDEEP
firebasevue.jsauthenticationjwtnuxt.js
Shubhang Chourasia
Shubhang Chourasia

Reputation: 153

Redirect function in Nuxt middleware is making state null

I have a Nuxt app in which everything works fine in middleware except when I use redirect. When I comment the redirect('/admin') line it works fine even the state data is present when console logged. As soon as I uncomment the redirect line it makes the state null. Please help if someone knows this issue. This exact code works in my other projects but not here.

This is my auth.js file in the middleware folder.

export default function ({ store, route, redirect }) {
  const user = store.getters['user/user']
  const blockRouteAdmin = /\/admin\/*/g
  const blockRouteManager = /\/manager\/*/g
  const path = ['/signup', '/login']
  let value = path.includes(route.path)
  if (user) {
    if (user.isAdmin) {    
      if (!route.path.match(blockRouteAdmin)) {
        redirect('/admin')
      }
    }
    if (user.isManager) {
      if (!route.path.match(blockRouteManager)) {
          redirect('/manager')
      }
    }
    if (user.isUser) {
           if (
        route.path.match(blockRouteAdmin) ||
        route.path.match(blockRouteManager) ||
        value
      ) {
        console.log('isUser', user.isUser)
        redirect('/')
      }
    }
  }
  if (!user) {
    if (
      route.path.match(blockRouteAdmin) ||
      route.path.match(blockRouteManager)
    ) {
      redirect('/')
    } else {
      redirect()
    }
  }
}

Here is my nuxt.config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'aitl',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['~/plugins/firebaseConfig.js'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
  ],

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en',
    },
  },

  // Content module configuration: https://go.nuxtjs.dev/config-content
  content: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

My index.js inside store.

import { vuexfireMutations } from 'vuexfire'
import { getUserFromCookie } from '../helper/index.js'

export const mutations = {
  ...vuexfireMutations,
}

export const actions = {
  async nuxtServerInit({ dispatch, commit }, { req }) {
    try {
      const user = getUserFromCookie(req)
      if (user) {
        await dispatch('user/setUSER', {
          email: user.email,
          isAdmin: user.admin,
          isManager: user.manager,
          isUser: user.user,
          uid: user.user_id,
          name: user.name,
        })
      }
    } catch (err) {
      console.log(err)
    }
  },
}

User.js in store folder

import { auth } from '../plugins/firebaseConfig'
import Cookies from 'js-cookie'

export const state = () => ({
  user: null,
})

export const getters = {
  user(state) {
    return state.user
  },
}

export const actions = {
  async userlogin({ dispatch }, user) {
    try {
      const token = await auth.currentUser.getIdToken(true)
      const userInfo = {
        email: user.email,
        isAdmin: user.admin,
        isManager: user.manager,
        isUser: user.user,
        uid: user.uid,
        name: user.displayName,
      }
      Cookies.set('access_token', token)
      await dispatch('setUSER', userInfo)
    } catch (err) {
      console.log(err)
    }
  },

  setUSER({ commit }, user) {
    commit('setUSER', user)
  },
}

export const mutations = {
  setUSER(state, user) {
    state.user = user
  },
}

Upvotes: 0

Views: 944

Answers (1)

kissu
kissu

Reputation: 46696

The issue was solved by going from target: 'static' to target: 'server', aka mirroring the settings of another working project.

Upvotes: 2

Related Questions