[英]Auth middleware with Nuxt and Firebase Nuxt Module in Static Mode
我正在尝试在 Nuxt 应用程序(静态)中实现 Firebase。 我安装了@nuxtjs/firebase,对其进行了配置,并使其与身份验证一起使用(登录和注销都有效)。 我想在登录时锁定整个应用程序。
但是当我启用中间件时,应用程序崩溃了。 这是因为,我认为,为了使模块在 SSR 中工作,还需要执行一些额外的步骤。 我认为在服务器中,由于未设置用户,中间件会触发重定向,对吗? 我怎样才能实现一个工作的中间件?
中间件auth.js
的代码:
export default function ({ store, redirect }) {
if (!store.state.user) {
return redirect('/login')
}
}
商店index.js
的代码
export const state = () => ({
user: null,
userData: {}
})
export const getters = {
}
export const mutations = {
onAuthStateChangedMutation(state, {authUser}){
if (!authUser) {
state.user = null
} else {
const { uid, email } = authUser
state.user = { uid, email }
}
},
setUserData(state, payload){
state.userData = payload
}
}
export const actions = {
async onAuthStateChangedAction({commit}, {authUser}){
if (!authUser) {
state.userData = {}
} else {
try{
const userRef = await this.$fire.firestore.collection('users').doc(authUser.uid).get()
const userData = await userRef.data()
commit('setUserData', userData)
}
catch(e){
console.log(e)
}
}
}
}
在nuxt.config
firebase: {
services:{
auth:{
ssr: true,
initialize:{
onAuthStateChangedMutation: 'onAuthStateChangedMutation',
onAuthStateChangedAction: 'onAuthStateChangedAction',
}
},
firestore: true,
analytics: true
}
},
router:{
middleware: 'auth'
}
我设法使它工作,合并 nuxtjs firebase 文档和我的用例上的信息。 尽管如果有人有更好的想法或发现我的解决方案中的漏洞,请随时贡献:
商店index.js
的代码
export const state = () => ({
user: null,
userData: null,
isUserReady: false
})
export const getters = {
}
export const mutations = {
onAuthStateChangedMutation(state, {authUser}){
if (!authUser) {
state.user = null
} else {
const { uid, email } = authUser
state.user = { uid, email }
}
},
clearUserData(state){
state.isUserReady = false
state.userData = null
},
setUserData(state, payload){
state.userData = payload
state.isUserReady = true
}
}
export const actions = {
async nuxtServerInit({ commit }, { res }) {
if (res && res.locals && res.locals.user) {
const { ...authUser } = res.locals.user
commit('onAuthStateChangedMutation', { authUser })
}
},
async onAuthStateChangedAction({commit}, {authUser}){
if (!authUser) {
commit('clearUserData')
} else {
try{
const userRef = await this.$fire.firestore.collection('users').doc(authUser.uid).get()
const userData = await userRef.data()
commit('setUserData', userData)
}
catch(e){
console.log(e)
}
}
}
}
在nuxt.config.js
firebase: {
config:{
...
},
services:{
auth:{
initialize:{
onAuthStateChangedMutation: 'onAuthStateChangedMutation',
onAuthStateChangedAction: 'onAuthStateChangedAction',
}
},
firestore: true,
}
},
pwa: {
manifest: {
lang: 'en'
},
workbox: {
importScripts: [
'/firebase-auth-sw.js'
],
dev: true
}
}
通过这些设置,我可以在 Netlify 上部署应用程序( ssr: false, target: "static"
),并且用户可以登录,即使页面重新加载,登录也是持久的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.