在渲染中间件之前如何在nuxt中渲染vuex模块

Question

我的问题是，当页面重新加载时，中间件首先呈现，然后是 vuex；因此，当我想更改 vuex 中的值时，基于用户是否经过身份验证，中间件返回 vuex 的初始值。这意味着，如果用户通过身份验证，它首先显示 false，在渲染 vuex 之后，它再显示 true。但是到那时，中间件已经完成加载。这会导致在页面刷新时将用户重定向到登录页面。我的问题是，它们是我可以在中间件之前先加载 vuex 的一种方式吗？

这是中间件代码；

export default async function ({ store, redirect }) {

  // If the user is not authenticated

  const authenticated = await store.state.signup.authenticated

  if (!authenticated) {

    console.log(!authenticated)

    return redirect('/login')

  } else {

    console.log('I am logged in')

  }

}

这是vuex代码；

import axios from 'axios'

export const state = () => ({

  authenticated: false,

  credential: null,

})

export const mutations = {

  ADD_USER(state, data) {

    state.credential = data

    state.authenticated = true

  },

  LOGOUT(state) {

    state.credential = null

    state.authenticated = false

  },

}

export const actions = {

  async addUser({ commit }, data) {

    try {

      const response = await axios.post(

        'http://localhost:8000/api/rest-auth/registration/',

        data

      )

      commit('ADD_USER', response.data)

      this.$router.push('/')

    } catch (error) {

      return console.log(error)

    }

  },

  async addUserLogin({ commit }, data) {

    try {

      const response = await axios.post(

        'http://localhost:8000/api/rest-auth/login/',

        data

      )

      commit('ADD_USER', response.data)

      this.$router.push('/')

    } catch (error) {

      return console.log(error)

    }

  },

}

export const getters = {

  loggedIn(state) {

    return !!state.credential

  },

}

Answer 1

是的，有办法做到这一点！事实上，商店已经在您的中间件中可用。但在你的情况下，商店是空的！您需要先获取数据并填充存储。我建议你阅读关于 nuxt 中间件的文档https://nuxtjs.org/guide/routing#middleware。它指出中间件可以是异步的。为此，只需返回一个 Promise 或使用第二个回调参数。所以在你的情况下，你需要在你的中间件中返回一个 Promise ：这个 Promise 将是 axios 请求。这是一个提议：export default function ({ store, redirect }) {    return new Promise(resolve => store.dispatch('signup/addUserLogin', data).then((user) => {        if (!user) {            // User not found            redirect('/login');        } else {            // Do your stuff with the user freshly got, like commit in the store            resolve();        }    })}在您的情况下，您应该修改操作addUserLogin：您应该只在此函数中获取 axios 查询，而不是重定向。此外，您将遇到操作中使用的数据、密码和用户的问题。刷新时，您会丢失此数据。您应该实现一个令牌系统，如 JWT，并将它们存储在本地存储或 cookie 中（如本示例中的https://nuxtjs.org/examples/auth-external-jwt/）。