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



  • 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



  • 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.



  • @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.


Log in to reply