javascript - 在渲染中间件之前如何在nuxt中渲染vuex模块
问题描述
我的问题是,当页面重新加载时,中间件首先呈现,然后是 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
},
}
这是 login.vue 代码
<template>
<client-only>
<div class="container">
<v-card max-width="500" class="margin-auto">
<v-card-title>Sign up</v-card-title>
<v-card-text>
<v-form @submit.prevent="submitUser">
<v-text-field
v-model="data.username"
label="Username"
hide-details="auto"
append-icon="account_circle"
></v-text-field>
<v-text-field
v-model="data.password"
label="Password"
hide-details="auto"
type="password"
append-icon="visibility_off"
></v-text-field>
<v-card-actions>
<v-btn color="success" type="submit" class="mt-4" dark>
Signup
</v-btn>
</v-card-actions>
</v-form>
<p>
Don't have an account? <nuxt-link to="/signup">Register</nuxt-link>
</p>
</v-card-text>
</v-card>
</div>
</client-only>
</template>
<script>
export default {
data() {
return {
data: {
username: '',
password: '',
},
}
},
methods: {
submitUser() {
this.$store.dispatch('signup/addUserLogin', this.data)
},
},
}
</script>
<style lang="scss" scoped>
.margin-auto {
margin: 2rem auto;
}
</style>
解决方案
是的,有办法做到这一点!事实上,商店已经在您的中间件中可用。但在你的情况下,商店是空的!您需要先获取数据并填充存储。
我建议你阅读关于 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/)。
希望对你有帮助!
推荐阅读
- html - 使用锚元素 HTML 时出现一个小红点
- java - 如何使用firebase将图像从firebase数据库加载到android中的tinder等卡片堆栈中
- android - 崩溃后显示初始屏幕的 React-native 应用程序
- c++ - 河内递归塔无法正常工作
- php - 同时开发 Composer 的库和主项目的最佳实践是什么?
- python - 具有打印反向数字的Python递归函数
- android - 如果方法使用不重叠,2 Activity 是否应该有单独的 ViewModel?
- wget - 在 RHEL 7 中启用存储库后失去互联网连接(在 VMware 工作站 14 上)
- javascript - 对象数组中的 FullCalendar 事件初始化问题
- ruby - 如何覆盖 Ruby + 方法?