@vuejs_ru
Vue.js — русскоговорящее сообщество

Общаемся на темы, посвященные Vue.js и опыту его использования. Проблемы. Новости. Решения. См. также: @js_ru, @react_js, @angular_ru, @nuxtjs_ru Вакансии только тут: @javascript_jobs

3988 members

Архив канала @vuejs_ru 8 ноября 2016 г.

06:43:33 ДП
User 42324
Всем привет, возможно кто-то пользовался данной библиотекой https://github.com/iWader/vue-auth/tree/next
github.com/iWader/vue-auth/tree/next
vue-auth - Vue plugin for easily managing your app's auth state
06:45:56 ДП
User 42324
Вопрос следующий, как получить доступ к екземпляру обекта $auth, я хочу сделать проверку авторизации в роутерах  в методе router.beforeEach но при обращении в ввиде this.$auth.isAuthenticated() у меня ошибка Cannot read property '$auth'
06:48:38 ДП
User 42324
в компонентах оно видет обект $auth а вот в routes нет
06:53:01 ДП
User 184398046
Ты читал доку по роутеру? Тебе нужна эта страница, там описан твой кейс, *In-Component Guards*
https://router.vuejs.org/en/advanced/navigation-guards.html
06:53:46 ДП
User 42324
User 184398046
Ты читал доку по роутеру? Тебе нужна эта страница, там описан твой кейс, *In-Component Guards*
https://router.vuejs.org/en/advanced/navigation-guards.html
Да я смотрел сюда и сделал так
06:53:47 ДП
User 42324
import router from './routes'

Vue.use(VueAuth)

router.beforeEach((to, from, next) => {
  console.log(this.$auth.getToken())
  console.log('beforeEach')
  next()
})
06:53:51 ДП
User 42324
но ошибка
06:54:04 ДП
User 42324
Возможно подскажешь как правильно должно быть?
06:54:12 ДП
User 184398046
из доки
The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
06:54:22 ДП
User 184398046
какой нафиг this ???
06:54:30 ДП
User 42324
вот только что увидел
06:54:38 ДП
User 42324
а как тогда обращаться с обекту?
06:55:15 ДП
User 184398046
Я тебе написал выше, еще раз повторю:
смотри ту срницу, секцию In-Component Guards
06:57:47 ДП
User 42324
router.beforeEach((to, from, next) => {
  next(vm => {
    console.log(vm.$auth.getToken())
  })
})
06:57:50 ДП
User 42324
Получилось
06:57:57 ДП
User 42324
Спасибо Андрей за помощь)
07:47:06 ДП
User 42324
Сделал согласно документации
07:47:07 ДП
User 42324
router.beforeEach((to, from, next) => {
  next(vm => {
    console.log(this.$auth.getToken())
  })
})
07:47:15 ДП
User 42324
но в консоль ничего не выводится
07:47:20 ДП
User 42324
при том что токен есть
07:47:20 ДП
User 64800685
а что за $auth?
07:47:23 ДП
User 64800685
что за пакет?
07:47:37 ДП
User 42324
Всем привет, возможно кто-то пользовался данной библиотекой https://github.com/iWader/vue-auth/tree/next
github.com/iWader/vue-auth/tree/next
vue-auth - Vue plugin for easily managing your app's auth state
07:48:34 ДП
User 42324
тоесть вопрос какостановить выполнение кода и например если человек не авторизирован перенаправить его на страницу авторизации
07:48:46 ДП
User 42324
пробовал сделать next(false)
07:48:50 ДП
User 42324
безуспешно
07:49:25 ДП
User 42324
в документации к роутерам написано next(): move on to the next hook in the pipeline. If no hooks are left, the navigation is confirmed.
07:49:32 ДП
User 42324
next(false): abort the current navigation.
07:49:47 ДП
User 42324
но у меня даже лог не выводит с токеном
07:50:53 ДП
User 42324
так то выводит лог
07:50:53 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log(this.$auth.getToken())
  })
})
07:51:00 ДП
User 42324
beforeEach в консоле
07:51:05 ДП
User 42324
а вот сам токен нет
07:51:54 ДП
User 64800685
сработает при след переходе по сути
07:52:03 ДП
User 42324
пробовал нет
07:52:08 ДП
User 42324
не срабатывает
07:52:32 ДП
User 42324
Наглядно даже так делал
07:52:33 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log('Token')
    console.log(this.$auth.getToken())
  })
})
07:52:34 ДП
User 184398046
Так токен уже есть? Смотри что там onsole.log(this.$auth)
А если нет токена, тоесть не авторизован, то редирект на страницу авторизации
07:52:49 ДП
User 42324
токен есть
07:52:58 ДП
User 42324
Андрей вот вопрос в следующем
07:53:00 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log('Token')
    console.log(this.$auth.getToken())
  })
})
07:53:14 ДП
User 42324
в консоль выводит только beforeEach а Token не выводится
07:53:18 ДП
User 184398046
кстати this.$auth.getToken() -> vm.$auth.getToken()
07:53:29 ДП
07:53:50 ДП
User 42324
поправил
07:53:56 ДП
User 42324
но всеравно лог не выводит
07:54:28 ДП
User 184398046
console.log('Token') не срабатывает?
07:54:45 ДП
07:56:05 ДП
User 42324
Таже делаю как в доках пишет типа редирект делаю на другой роутер но не работает
07:56:06 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log('Token')
    next({ name: 'account' })
    // console.log(vm.$auth.getToken())
  })
})
08:00:12 ДП
User 184398046
так у тебя келбек не срабатвает по какой-то причине.
08:06:03 ДП
User 42324
ну вот и я не понимаю почему
08:06:28 ДП
User 42324
если просто делать
08:06:28 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
})
08:06:31 ДП
User 42324
это работает
08:08:06 ДП
User 42324
а вот когдахочеш получить доступ к vm через next то уже не работает
08:12:53 ДП
User 85413039
Область видимости?
08:16:49 ДП
User 42324
не понял
08:19:28 ДП
User 85413039
vm как объявлен?
08:21:48 ДП
User 42324
Vue.use(VueAuth)

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log('Token')
    // console.log(vm.$auth.getToken())
  })
})

/* eslint-disable no-new */
const vm = new Vue({
  router,

  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})
09:05:05 ДП
User 42324
Кто-то может с этим помочь?
09:05:24 ДП
User 64800685
прости
09:05:24 ДП
09:05:25 ДП
User 64800685
у тебя
09:05:26 ДП
09:05:30 ДП
User 64800685
объявлен?
09:05:34 ДП
User 42324
конечно
09:05:39 ДП
User 42324
сек покажу
09:05:52 ДП
User 42324
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
09:06:20 ДП
User 64800685
короче авторизация твоя работает через jwt
09:06:23 ДП
User 64800685
ну суть ее
09:06:27 ДП
User 64800685
сорцы то смотрел?
09:06:31 ДП
09:06:41 ДП
User 42324
тут дело с роутерами
09:06:50 ДП
User 42324
а именно с beforeEach next
09:06:58 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next(vm => {
    console.log('Token')
  })
})
09:07:06 ДП
User 42324
слово Token в консоль не выводит
09:07:21 ДП
User 64800685
при переходе на след роут выводит?
09:07:25 ДП
09:07:49 ДП
User 64800685
мб не то ты юзаешь? посмотри доку
09:07:49 ДП
User 42324
в этом и вопрос
09:07:57 ДП
09:08:14 ДП
User 42324
http://router.vuejs.org/en/advanced/navigation-guards.html
09:08:32 ДП
User 42324
In-Component Guards
09:08:38 ДП
User 42324
вот это использую
09:08:45 ДП
User 42324
мне нужен просто доступ к vm
09:08:51 ДП
User 42324
beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via vm
  })
}
09:10:58 ДП
User 42324
User 64800685
мб не то ты юзаешь? посмотри доку
Мне главное сдлеать проверку на авторизацию. Если пользователь не авторизован перенаправить его на авторизацию
09:11:30 ДП
User 64800685
я сам недавно впервые авторизацию делал короче
09:11:33 ДП
User 64800685
но у меня это в вуексе
09:11:35 ДП
User 64800685
лежит
09:12:02 ДП
User 64800685
2 основных роута как бы office
09:12:03 ДП
User 42324
я тоже по началу так хотел
09:12:04 ДП
09:12:09 ДП
User 64800685
от них суброуты
09:12:10 ДП
User 64800685
я так думал
09:12:16 ДП
User 64800685
но у меня не рендерит суброуты(
09:13:12 ДП
User 42324
странно
09:17:58 ДП
User 42324
Вот вроде понял
09:18:14 ДП
User 42324
next(vm работает только beforeRouteEnter
09:18:34 ДП
User 138709614
Иван, попробуй через beforeRouteEnter сделать - в текущем проекте использую, проблем нет
09:18:38 ДП
09:18:57 ДП
User 42324
Сергей вот тольк что тоже это вычитал в доках
09:19:17 ДП
User 42324
Как найду решение для beforeEach сразу отпишусь
10:05:01 ДП
User 42324
Ребята нашол решение
10:05:08 ДП
User 42324
оказалось просто
10:05:09 ДП
User 42324
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  console.log(router.app.$auth.getToken())
  next()
})
10:05:11 ДП
User 42324
вот пример
10:05:41 ДП
User 42324
next(vm)не работает
10:13:26 ДП
User 42324
Вот пример кода с проверкой на авторизацию
10:13:27 ДП
User 42324
router.beforeEach((to, from, next) => {
  const auth = router.app.$auth
  const token = auth.getToken() ? auth.getToken() : false

  if (!token) {
    return next(false)
  }

  next()
})
10:18:41 ДП
User 42324
Вот еше нашол библиотеку https://github.com/websanova/vue-auth у нее вижу больше звездочек
github.com/websanova/vue-auth
Jwt Auth library for Vue.js. Contribute to websanova/vue-auth development by creating an account on GitHub.
10:18:47 ДП
User 42324
Кто-то ей пользуется?
12:05:45 ПП
User 55423102
Может кто подскажет как правильнее. Есть два компонента. Один вложен в другой. Вот как правильнее во вложенном создавать событие с передачей какой-нибудь инфы, чтобы их услышал родительский компонент? this.$parent.$emit('hash-changed', hash); таким образом? И в родительском в mounted навешивать $on на все возможные события или как?
12:06:18 ПП
User 42324
Я лично все через vuex делаю
12:06:24 ПП
User 42324
вроде так удобней
12:06:53 ПП
User 55423102
да вроде бы задачка простая, не хочется городить сложностей накидывая сверху vuex :)
12:07:18 ПП
User 55423102
просто в документации предлагаю bus создавать, так у меня вообще не удалось чтобы родитель услышал события из дочернего компонента
12:08:14 ПП
User 55423102
просто можно из дочернего и вообще через $parent с длинной цепочкой вызовов и сам метод в родительском компоненте вызвать. Но как понимаю это потом может аукнуться
12:08:52 ПП
User 42324
Может еще кто-то знает как такое сдлеать)
01:14:55 ПП
User 42324
Ребята помгите
01:15:06 ПП
User 42324
Как получить доступ к vm внутни
01:15:07 ПП
User 42324
Vue.http.interceptors.push((request, next) => {
  console.log(vm)
});
01:15:23 ПП
User 42324
vue-resource
01:16:52 ПП
User 138709614
Так vm не объявленна
01:17:28 ПП
User 42324
мне надо получить доступ с vm = new Vue()
01:19:23 ПП
User 42324
Сергей где я ее должен обявить?
01:20:17 ПП
User 138709614
Пока не понимаю, что именно нужно там получить
01:20:42 ПП
User 42324
екземпляр vue
01:20:54 ПП
01:21:18 ПП
User 42324
тоже самое что и this
01:21:26 ПП
User 138709614
Компонент который вызвал ресурс ?
01:21:34 ПП
01:22:02 ПП
User 42324
мне нужно внутри получить доступ к vue обекту
01:22:40 ПП
User 138709614
Если к глобальному, Можешь сделать import Vue
01:22:43 ПП
User 164670195
var vue = new Vue()
01:22:44 ПП
01:23:10 ПП
User 42324
так это уже сделано давно
01:23:23 ПП
User 42324
я спрашиваю как внутри получить
01:23:27 ПП
User 42324
в push
01:23:51 ПП
User 138709614
Это для чего нужно ? можно пример ?
01:24:02 ПП
User 42324
ладно проехали
01:24:06 ПП
User 42324
Для авторизации
01:24:12 ПП
User 42324
Чтоб передавать токен в запрос
01:24:15 ПП
User 42324
автоматом
01:24:30 ПП
User 133750577
Не вдаваясь в детали, мб проблема в жирной стрелке? Там контекст вроде не передается
01:24:51 ПП
User 42324
вот и я про это подумал
01:24:57 ПП
User 42324
гдето читал про это
01:25:47 ПП
User 138709614
Наоборот, => сохраняет внешний контекст, не создавая нового
01:27:16 ПП
User 42324
Вот код
01:27:17 ПП
User 42324
Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  console.log('VueResource request interceptors')

  // if (token !== null && token !== 'undefined') {
    // set token on request
  // }

  next((response) => {
    if (response.status && response.status.code === 401) {
    //   // remove token
    }
    if (response.headers && response.headers.Authorization) {
    //   // add token
    }

    console.log('VueResource response interceptors')
  })
})

/* eslint-disable no-new */
const vm = new Vue({
01:27:41 ПП
User 42324
token у меня хранится в виде this.$auth.getToken()
01:27:56 ПП
User 42324
вот внутри interceptors мне надо его получить
01:30:30 ПП
User 42324
Теперь вроде норм обяснил
01:32:07 ПП
User 42324
сори забыл
01:32:21 ПП
User 155096996
Как ты их экранировал?
01:32:32 ПП
01:32:55 ПП
User 42324
но это моей проблемы не решает
01:32:57 ПП
User 155096996
просто иногда в ЖС строки в обратных кавычках и телеграм сьедает их
01:36:55 ПП
User 42324
о нашол способ
01:36:58 ПП
User 42324
console.log(Vue.auth)
01:37:09 ПП
User 42324
так можно получить доступ к vm