why the user is not redirected

userQddb 0
Viewed 33

I am learning vuejs 3. And Vue Router.

I have this script in the "router.js" file (extract) :

router.beforeEach((to, from, next) => {
.....
    if (to.meta.requiresAuth && loggedIn && !authorizedRoles.includes(roleId)) {
        console.log('forbidden')
        
        return {
          path: '/forbidden'
        }
        
      }
.....

When the connected user has not the necessary authorizations, then it must be redirected to the page "forbidden". In my case, the conditions are KO. I see the message "forbidden" in the console , but there is no redirection.

If I go to the url "/forbidden", the page is correctly displayed.

What could be my problem ?

vue-router vue.js
1 Answers

You may be using an old version of Vue router, which requires the user to call next() at least once. Try this code instead:

router.beforeEach((to, from, next) => {
.....
    if (to.meta.requiresAuth && loggedIn && !authorizedRoles.includes(roleId)) {
        next({path: '/forbidden'})
      }
.....

If this doesn't work, try going with the named route instead:

router.beforeEach((to, from, next) => {
.....
    if (to.meta.requiresAuth && loggedIn && !authorizedRoles.includes(roleId)) {
        next({name: NAME_OF_FORBIDDEN_ROUTE})
      }
.....

More information can be found here.

usercewD0
Related