Here is the code from the src/middlewares/auth.ts file:
import { Vue } from 'vue-property-decorator'
export default class AuthGuard extends Vue {
public guest(to: any, from: any, next: any): void {
if (this.$store.state.authenticated) {
next()
console.log('authenticated')
} else {
next({
path: '/dashboard'
})
console.log('not authenticated')
}
}
}
This is the same auth.ts file but in its JavaScript version:
export default {
guest(to, from, next) {
if (this.$store.state.authenticated) {
next()
console.log('authenticated')
} else {
next({
path: '/dashboard'
})
console.log('not authenticated')
}
}
}
The functionality works correctly with JavaScript, but not when using TypeScript.
I am trying to import this class into AuthRoutes.ts:
import Guard from '@/middlewares/auth'
export default [
{
path: '/',
name: 'login',
component: () => import('@/views/Login.vue'),
beforeEnter: Guard.guest
}
]
However, I am encountering an error that says: "Property 'guest' does not exist on type 'typeof AuthGuard'." I am still struggling to understand these TypeScript types. What could I be missing here?