After successfully navigating the login process and implementing user-role-based routing, I proceeded to set up authentication guards for different URLs.
Though it initially seemed straightforward, I encountered an error that I haven't been able to troubleshoot due to a lack of similar use case examples. Most instances of this error that I've come across involved misnaming the router instance something other than "router," which isn't the case here, as far as I can tell. Just so you know, I'm using the vue-cli template with webpack.
This is from my index.js:
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/'
},
{
path: '/login',
component: Login
},
{
path: '/trucker',
component: Trucker,
meta: { requiresAuth: true, truckerAuth : true, dispatchAuth: false },
children: [
{
path: '/loads',
component: Loads
}
]
},
{
path: '/dispatch',
component: Dispatch,
meta: { requiresAuth: true, truckerAuth : false, dispatchAuth: true },
children: [
{
path: '/drivers',
component: Drivers
}
]
},
]
})
router.beforeEach((to, from, next) => {
if(to.meta.requiresAuth) {
const employeeId = window.localStorage.getItem('employee_id')
if(!employeeId) {
next('/login')
}
else if(to.meta.truckerAuth) {
const employeeId = window.localStorage.getItem('employee_id')
if(employeeId === 3) {
next()
}else {
next('/login')
}
} else if(to.meta.dispatchAuth) {
const employeeId = window.localStorage.getItem('employee_id')
if(employeeId === 2) {
next()
}else {
next('/login')
}
}
}else {
next()
}
})
And from my main.js:
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Can anyone provide insight into what might be causing this issue?
Update: After some trial and error, I discovered the root of the problem - changing my previous export default new Router syntax to const router = new Router, along with adjusting "Router" to VueRouter to match example conventions, seems to have triggered the error. Still unsure why that alteration resulted in the issue though.