반응형
Nuxt SSR 인증 가드 및 Firebase 인증
Nuxt에서 Firebase Auth를 사용하여 인증가드를 구현하려고 하는데 문제가 계속 발생하고 있습니다.현재 로그인 할 수 있지만 로그인 후 올바른 페이지가 로드되지 않습니다.로그인 후 사용자는 '/profile-overview' 페이지로 리다이렉트해야 하지만 그렇게 되지 않습니다.'프로파일' 페이지에서 다른 페이지로 이동한 후 다시 돌아가면 자동으로 '프로파일 개요' 페이지로 이동합니다.로그인 후 페이지 네비게이션/새로고침에 문제가 있을 뿐입니다.또한 사용자가 다시 로그아웃한 페이지를 새로 고칠 때 사용자가 아직 로그인하지 않은 것을 제외해도 될까요?
지금까지의 코드:
페이지:
loginGoogle () {
this.$store.dispatch('signInWithGoogle').then(() => {
console.log('reload')
location.reload()
//window.location.reload(true)
}).catch((e) => {
this.title = 'Google login failed'
this.message =
"Something went wrong, please try again later. If this problem keeps happening please contact: jonas@co-house.be " + "Error: " + e.message;
this.dialog = true;
})
},
미들웨어:
export default function ({ store, redirect, route }) {
console.log('user state' + store.state.user)
console.log('route ' + route.name)
store.state.user != null && route.name == 'profile' ? redirect('/profile-overview') : ''
store.state.user == null && isAdminRoute(route) ? redirect('/profile') : ''
}
function isAdminRoute(route) {
if (route.matched.some(record => record.path == '/profile-overview')) {
return true
}
}
플러그인:
'@/services/fireInit.js'에서 {auth} 가져오기
export default context => {
const { store } = context
return new Promise((resolve, reject) => {
auth.onAuthStateChanged(user => {
if (user) {
return resolve(store.commit('setUser', user))
}
return resolve()
})
})
}
스토어(로그인 전용 기능:
signInWithGoogle ({ commit }) {
return new Promise((resolve, reject) => {
auth.signInWithPopup(GoogleProvider).then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
return resolve(store.commit(state.user, result.user))
// ...
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
})
})
},
제가 무엇을 잘못했는지, 아니면 제가 읽을 수 있는 문서나 튜토리얼을 알고 있는 사람이 있나요?
잘 부탁드립니다.
nuxtServerInit의 서버에서 사용자를 초기화해야 합니다.구현 예에 대해서는 이 보고서를 참조하십시오.https://github.com/davidroyer/nuxt-ssr-firebase-auth.v2
언급URL : https://stackoverflow.com/questions/52451270/nuxt-ssr-auth-guard-with-firebase-auth
반응형
'IT이야기' 카테고리의 다른 글
axios 응답 개체의 모든 항목에서 vuex 상태로 특정 값을 추출하려면 어떻게 해야 합니까? (0) | 2022.06.03 |
---|---|
Vue js의 Firebase에서 토큰을 검색하는 동안 오류가 발생하는 이유는 무엇입니까? (0) | 2022.06.03 |
vuejs + babel-intered 이거.setDynamic은 함수가 아닙니다. (0) | 2022.06.03 |
Nuxt 저장소 변환이 TypeError를 수신했습니다. (0) | 2022.06.03 |
대부분의 C개발자가 const 대신 정의를 사용하는 이유는 무엇입니까? (0) | 2022.06.02 |