使用 TypeScript 和 FirebaseAuthUI 在 Store 中使用 vue-router 进行 Vue 导航

Question

I'm trying to learn Vue.js and have created a Quasar (Vue) project with TypeScript support, using Quasar CLI.

I'm using FirebaseAuthUI for authentication and have created a boot-file called firebase.ts. FirebaseAuth has a 'onAuthStateChanged', which is called each time a user logs in or out. The 'onAuthStateChanged' method is placed as a Store action (handleAuthStateChanged).

My problem is that there is no access to this.$router using Typescript in the store.ts file. Is it wrong to use navigation from a Store Action? Is this a Typescript problem? Or am I overlooking something?

Project setup:

'handleAuthStateChanged' is registered in App.vue

///App.vue

<script lang="ts">
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions('userStore', ['handleAuthStateChanged'])
  },
  mounted() {
    this.handleAuthStateChanged();
  }
};
</script>

///store.ts

const actions = {
  handleAuthStateChanged({ commit }: { commit: any }) {
    
    firebaseAuth.onAuthStateChanged(user => {
      if (user) {
        // User is logged in
    
        this.$router.push('/myPage'); //$router shows Typescript ERROR, but works???
      } else {
        // User is logged out
        
        this.$route.push('/login'); //$router shows Typescript ERROR, but works???
      }
    });
  },
  logoutUser() {
    firebaseAuth.signOut();
  }
};

Error message in VScode:

Property '$router' does not exist on type '{ handleAuthStateChanged({ commit }: { commit: any; }): void; logoutUser(): void; }'.ts(2339)

Answer 1

WHen you use:

          this.$router.push('/myPage'); //$router shows Typescript ERROR, but works???

you should first check if the route you are pushing is not already the current one.