leonardovilarinho / vue-acl

Access Control List plugin for VueJS 2.0
375 stars 76 forks source link

notfound route to be based on permission #92

Open kakarukeys opened 4 years ago

kakarukeys commented 4 years ago

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?

mreall commented 4 years ago

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.

leonardovilarinho commented 4 years ago

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.

kakarukeys commented 4 years ago

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.