[英]Firebase Auth - User not logged in after Firebase sign up and redirect
[英]Firebase auth logs in but redirect to home fails after successfully logged in (server response 200)
我正在開發一個基於Firebase的vue應用程序,該應用程序應在成功登錄后將用戶重定向到主頁。我正在不按原計划的那樣定向到主視圖。 成功登錄后,它仍然掛在登錄頁面上。
this。$ router.replace根本不起作用,我也不知道為什么。
main.js
import Vue from "vue";
import firebase from "firebase";
import App from "./App.vue";
import router from "./router";
import swalPlugin from './plugins/VueSweetalert2';
Vue.config.productionTip = false;
let app ='';
firebase.initializeApp( {
apiKey: "#",
authDomain: "#",
databaseURL: "#",
projectId: "#",
storageBucket: "#",
messagingSenderId: "#"
});
Vue.use(swalPlugin);
firebase.auth().onAuthStateChanged(() => {
if (!app) {
app = new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});
router.js
import firebase from 'firebase';
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import SignUp from "./views/SignUp.vue";
Vue.use(Router);
const router = new Router({
routes: [
{
path: '*',
redirect: '/login'
},
{
path: '/',
redirect: "/login"
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/sign-up',
name: 'signUp',
component: SignUp
},
{
path: '/home',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
}
]
});
router.beforeEach ((to, from, next) => {
const currentUser = firebase.auth.currentUser;
const requiresAuth = to.matched.some (record => record.meta.requiresAuth);
if (requiresAuth && !currentUser) next('login');
else if (!requiresAuth && currentUser) next('home');
else next();
});
export default router;
Login.vue視圖
<template>
<form autocomplete="off">
<div class="login">
<h1>Login</h1>
<p>Sign in to stay updated with the latest news</p>
<hr>
<input type="text" placeholder="Email" v-model="email">
<input type="password" placeholder="Enter Password" v-model="password">
<hr>
<button @click="login">Login</button>
<p>Don't have an account yet? Create one <router-link to="/sign-up">here</router-link></p>
</div>
</form>
</template>
<script>
import firebase from 'firebase';
import Swal from 'sweetalert2';
export default {
name: 'login',
data() {
return {
email: '',
password: ''
}
},
methods: {
login: function(){
firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
(user) => {
this.$router.replace('home');
},
(err) => {
Swal.fire({
type: 'error',
title: 'An error occurred...',
text: err.message
})
}
);
}
}
}
</script>
Home.vue視圖
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<button @click="logout">Logout</button>
</div>
</template>
<script>
import firebase from "firebase";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
},
methods: {
logout: function(){
firebase.auth().signOut().then(() => {
this.$router.push ({name: 'login'})
})
}
}
};
</script>
使用router.push()
this.$router.push({name: 'home'});
讓我知道它是否有效!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.