router.beforeEach in laravel 5.4 - laravel

Question

(using laravel 5.4 and vue.js 2x)
I use router.beforeEach() to handle authorization in my app.
But, my function router.beforeEach() is only loading on the moment after login. If I refresh the page the function isn't called again.
Here is my code:
import router from './routes.js';
require('./bootstrap');
const app = new Vue({
el: '#app',
router,
});
router.beforeEach((to,from,next) => {
if(to.meta.requiresAuth){
authUser = '';
const authUser = JSON.parse(window.localStorage.getItem('authUser'))
if(authUser && authUser.access_token){
next()
}else{
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
}
next()
})
The full project: https://github.com/jrpikong/wingding

Answer 1

The way to check if the current route requires authentication is documented here: https://router.vuejs.org/en/advanced/meta.html
Change your beforeEach method to this:
router.beforeEach((to,from,next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
// do something
}
next();
}

Answer 2

As mentioned in the Documentation,
All route records matched by a route are exposed on the $route
object (and also route objects in navigation guards) as the
$route.matched Array. Therefore, we will need to iterate over
$route.matched to check for meta fields in route records.
router.beforeEach((to,from,next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
authUser = '';
const authUser = JSON.parse(window.localStorage.getItem('authUser'))
if(authUser && authUser.access_token){
next()
}else{
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
}
next()
})

Answer 3

I just switched the position of router.beforeEach to be before
const app = new Vue({
el: '#app',
router,
});
So, in full, the code looks like this:
import router from './routes.js';
require('./bootstrap');
router.beforeEach((to,from,next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
const authUser = JSON.parse(window.localStorage.getItem('authUser'))
if(authUser && authUser.access_token){
next()
}else{
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
}
next()
})
const app = new Vue({
el: '#app',
router,
});