Vue JS beforeRouteEnter - PullRequest
Новая
       14

Vue JS beforeRouteEnter

0 голосов
/ 27 апреля 2018

Я использую laravel и vuejs для своего приложения, и у каждого пользователя есть роль. Теперь я хочу ограничить пользователям доступ к маршрутным маршрутам по их ролям, перенаправив их на другой маршрут, если они не могут получить доступ к странице. Я использую beforeRouteEnter для vuejs, но получаю ошибку 

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('/')
    }
}

Я получаю эту ошибку 

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

1 Ответ

0 голосов
/ 27 апреля 2018
  • ваш can't использует this в beforeRouteEnter функции, поскольку before при обновлении маршрута vm вашего компонента не существует.
  • учитывая вас put role information in your vm, вы можете использовать next, чтобы получить свой vm:

`` `

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

`` `

  • на самом деле, вы должны использовать Global Router Guard и put your role information in global area, чтобы вы могли redirect your routing before your target component created
...