【问题标题】:Redirect function in Nuxt middleware is making state nullNuxt 中间件中的重定向功能使状态为空
【发布时间】:2021-12-22 09:41:22
【问题描述】:

我有一个 Nuxt 应用程序,它在中间件中一切正常,除非我使用重定向。 当我评论 redirect('/admin') 行时,即使控制台记录时状态数据存在,它也能正常工作。一旦我取消注释重定向行,它就会使状态为空。 如果有人知道这个问题,请帮忙。这个确切的代码在我的其他项目中有效,但不是在这里。

这是我在中间件文件夹中的auth.js 文件。

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()
    }
  }
}

这是我的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: {},
}

我的index.js在店内。

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 在存储文件夹中

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
  },
}

【问题讨论】:

  • redirect 仅在服务器上可用。你确定你只在服务器上使用这条线吗?
  • 是的,它只存在于中间件中。这个确切的代码在其他项目中对我有用。
  • 它在另一个项目中工作不会完全帮助我们在这里 IMO。也许尝试获取完全相同的文件并检查差异。要么是拼写错误,要么是你的代码使用的上下文存在差异。我已经格式化了你的代码,现在看起来好多了。
  • 我理解了这个问题。以前我使用目标:'静态',后来我切换到目标:'服务器'。现在它工作正常。

标签: firebase vue.js authentication jwt nuxt.js


【解决方案1】:

问题已通过从 target: 'static' 变为 target: 'server' 解决,也就是镜像另一个工作项目的设置。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-10-24
    • 2018-12-16
    • 2020-04-22
    • 1970-01-01
    • 2022-07-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多