For those who even with the documentation had the same difficulty than I to implement, follows the code and a brief explanation.
In my main.js
i defined globally
router.beforeEach((to, from, next) => {
console.log(to)
if(to.name == 'Dashboard'){
alert('dashboard')
}else{
next()
}
})
With this, it is already possible to restrict access without permission (I did not do any validation in this example), however, when trying to access via URL
still possible, however, I managed to solve with the following code on my page Dashboard
<script>
export default{
beforeRouteEnter(to, from, next){
if(to.meta.adminOnly === true){
next('/')
}
}
}
</script>
With this, just check if the user is logged in, if not, he would send it again to the login page /
.
You are using the Vue-router?
– bfavaretto
@bfavaretto Yes, I’m using
Vue-Router
– Rafael Augusto
I won’t be able to write an answer right now, but look at the Vue-router documentation. It allows you to intercept the route before you navigate to it. At this point you have to consult the server about access permissions, and only clear the route if the response is positive. This will generate a "loading" between routes.
– bfavaretto