Nuxt 中间件中的重定向功能使状态为空

Posted 2023-02-22

【中文标题】Nuxt 中间件中的重定向功能使状态为空

【英文标题】：Redirect function in Nuxt middleware is making state null

【发布时间】：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。也许尝试获取完全相同的文件并检查差异。要么是拼写错误，要么是你的代码使用的上下文存在差异。我已经格式化了你的代码，现在看起来好多了。

我理解了这个问题。以前我使用目标：'静态'，后来我切换到目标：'服务器'。现在它工作正常。

【参考方案1】：

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