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

素材狗 2022-01-01 14:24:55 文章分类：前端问题点击数：1次

文章标签

Redirect function in Nuxt middleware is making state null(Nuxt中间件中的重定向功能使状态为空)

本文介绍了Nuxt中间件中的重定向功能使状态为空的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个Nuxt应用程序，在该应用程序中，除了使用重定向之外，在中间件中一切都工作得很好。当我注释重定向(‘/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
  },
}