Push user to specific Vue if user is not logged in (firebase.auth)

[dirkhd]

Hey guys,

even I investigated Danny’s Smackchat App, I am not able to figure out what’s going on in my app or what I overlook.

I like to re-route the user of my app (dev for Android) to a specific vue (Login.vue) if he/she is not logged in. Authentification is implemented via Firebase.Auth.

So in App.vue I implemented a “handleAuthStateChanged” action including a “firebaseAuth.onAuthStateChanged” according Dannys Smackchat.

handleAuthStateChanged({ commit, dispatch, state }) {
		firebaseAuth.onAuthStateChanged(user => {
		  if (user) {...

and in case user is not logged in I use

else {
       this.$router.replace('/auth')
...

This works when I start the app or reload any vue (page).
But in case I type in a specific URL in browser, I am able to visit a different page and the user is not redirected.

What is my mistake here?

Thx a lot
Dirk

[walfin]

Maybe you want to store user in Vuex and do this (perhaps in your root component’s created hook):

this.$router.beforeEach((to,from,next)=>this.$store.state.user?next():next('/auth'));

Alternatively, you can use vue-router abstract mode to prevent the user from manually keying in a hash / path.

[dirkhd]

@walfin Thank you for your ideas. For now, I changed the routing from “hash” to “history” which is not what you suggested This seems to work in the way that the re-directing works.
But I have to dig deeper into the idea using “abstract” mode but that seems not to work with my current program. I guess I must read a bit about Vue routing in the manual.