Vue js beforeRouteEnter

Question

I am using laravel and vuejs for my app and every user has a role. Now I want to restrict users to access vue routes by their roles by redirecting them to another route if they can't access the page. I am using beforeRouteEnter for vuejs but I am getting an error

data() {
    return{
      role: '',
    }
  },
mounted() {
    axios.post('/getRole')
    .then((response) => this.role = response.data)
    .catch((error) => this.errors = error.response.data.errors)
  },

beforeRouteEnter (to, from, next) {
    if (this.role === 'Admin') {
      next()
    }else {
      next('/')
    }
}

I am getting this error

app.js:72652 TypeError: Cannot read property 'role' of undefined
    at beforeRouteEnter (app.js:90653)
    at routeEnterGuard (app.js:72850)
    at iterator (app.js:72690)
    at step (app.js:72464)
    at runQueue (app.js:72472)
    at app.js:72726
    at step (app.js:72461)
    at app.js:72465
    at app.js:72711
    at app.js:72539

have your problem be solved?

Kaicui
– Kaicui

2018-04-27 09:00:13 +00:00
Commented Apr 27, 2018 at 9:00 — Kaicui
– Kaicui, Commented Apr 27, 2018 at 9:00

Penny Liu · Accepted Answer · 2023-04-19 02:06:59Z

2

you can't use this in beforeRouteEnter function,because before the route updates, your component's vm does not exist.
in consideration of you put role information in your vm, you can use next to get your vm:

beforeRouteEnter(to, from, next) {
  next(vm => {
    // put your logic here
    if (vm.role === 'Admin') {
    }
  })
}

actually,you should use the Global Router Guard ,and put your role information in global area,so that your can redirect your routing before your target component created

edited Apr 19, 2023 at 2:06

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Apr 27, 2018 at 7:12

Kaicui

3,8811 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js beforeRouteEnter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related