vue-acl icon indicating copy to clipboard operation
vue-acl copied to clipboard

notfound route to be based on permission

Open kakarukeys opened this issue 4 years ago • 3 comments

notfound: { path: '/error', forwardQueryParams: true, },

It seems rather odd notfound option is fixed to just one route. A very common use-case is that if a visitor without account is blocked by ACL, I would want to redirect him to Login page. Whereas for a registered user, I would want to redirect him to the plan upgrade page. Otherwise, to 403 Forbidden error page.

Under the current version of vue-acl, it seems they all go to 403 Forbidden.

May I know how to define notfound based on the current permission?

kakarukeys avatar Jun 13 '20 03:06 kakarukeys

I agree this would be a helpful feature. There are also times I want the user to see a 404 page, so I can help them find what they are looking for.

mreall avatar Jun 27 '20 20:06 mreall

Hello, this really would be a useful resource. At the moment I am not able to give as much time as I wanted to the repository. As soon as possible I will see such a resource.

For now you can redirect the client based on your notfound route component based on permission.

leonardovilarinho avatar Jul 22 '20 10:07 leonardovilarinho

Hello, this really would be a useful resource. At the moment I am not able to give as much time as I wanted to the repository. As soon as possible I will see such a resource.

For now you can redirect the client based on your notfound route component based on permission.

No problem. I used the following:

// extra ACL logic not supported by vue-acl
router.beforeEach((to, from, next) => {
  const accessRole = store.getters['user/accessRole']

  // when ACL blocks a URL, redirect to a suitable page based on role
  if (to.name === 'not-authorized' && to.query.origin) {
    if (accessRole === 'public') {
      next({name: 'login', query: {to: to.query.origin}})
    } else if (accessRole === 'freeloader') {
      if (store.state.route.name === 'my-account') {
        // alert user if he tries to access priviledged pages without settling payment in current page
        store.commit('SET_ERROR_MSG', 'Your account has one pending payment.')
      }
      next({name: 'my-account'})
    } else if (accessRole === 'user') {
      next({name: 'sign-up'})
    } else {
      next()
    }
  } else {
    next()
  }
})

Unfortunately, the login route requires a "redirect to after login" query parameter, there is no way to set this other than changing your code. Because of how vue-router works, once the route interceptor in vue-acl changes the route (by calling next()), all information regarding the previous route is lost, so there is no way to set this query param.

It'd be better, to support this from vue-acl.

kakarukeys avatar Jul 22 '20 11:07 kakarukeys