у нас на проекте SPA, я до этого приложения с авторизацией не делал, с токенами первый раз знаком, тут поэтому совет нужен)

Серьезное?

выразился так для привлечения внимания)

Получаешь на сервере токен, потом в хедер его

в общем, я сделал входное окно, которое по дэфолту отправляет на регистрацию или авторизацию, после регистрации или авторизации приложение даёт доступ к интерфейсу (внутри флаг переключаю, после получения прав доступа), в приложении нужно проверять токен, который я в LocalStorage записываю, проверка идёт в каждом компоненте в худе created, возможно лучше эту проверку сделать в хуках роутинга, если токен протухает, то удаляю его и флаг автоматически переключается на редирект к форме входа/авторизации

кто как делал?

поделитесь опытом

точно не в компонентах

точно не в компонентах

в хуках роутинга?

хук роутинга - самое нормальное место

такой момент, если рефрешу страницу, то срабатывает дэфолтный редирект на страницу авторизации, туплю и не могу врубить как оставлять пользователя на странице роута, где он сделал рефреш, если токен не протух

https://github.com/auth0-blog/vue-jwt-authentication/tree/master/src

я вот так делал, тут все есть, и goto после авторизации прочее.

Спасибо)

В проекте с jwt перед монтированием Vue вызываются проверки...

я после авторизации пушу в роутинг страницу стартового отображения самого приложения, если права доступа получены

В проекте с jwt перед монтированием Vue вызываются проверки...

в хуках beforeMounted?

До вызова экземпляра

у вью дока вообще отличная

а взять пример, у меня 3 роута: about, prices, contakts, вход в приложение на страницу about, но на странице prices я сделал рефреш страницы и меня перекидывает на страницу входа в приложение - about, как сохранить стэйт в роутинге, чтоб остаться в том же месте после рефреша?)

там почти все распространенные кейсы расписаны

а взять пример, у меня 3 роута: about, prices, contakts, вход в приложение на страницу about, но на странице prices я сделал рефреш страницы и меня перекидывает на страницу входа в приложение - about, как сохранить стэйт в роутинге, чтоб остаться в том же месте после рефреша?)

vuex используешь?

vuex используешь?

да

вот, у Vuex есть initial state

ты в него должен поместить свой токен из локал сторэджа, если я правильно думаю

точнее даже не токен, а флаг authenticated

точнее даже не токен, а флаг authenticated

+

ты в него должен поместить свой токен из локал сторэджа, если я правильно думаю

ну при рефреше я всё же полезу в localStorage

под рефрешем ты понимаешь ctrl+R?

флаг при рефреше сбрасывается

под рефрешем ты понимаешь ctrl+R?

F5

флаг при рефреше сбрасывается

Поэтому мы перед вызовом экземпляра диспатчим

так при рефреше страницы у тебя весь javascript запускается снова, и у тебя происходит инициализация vue приложения, инициализируется store

я флаг меняю при авторизации/регистрации, чтоб получить доступ к приложению, а потом ещё делаю запрос за данными юзера, отправляя токен по API

Поэтому мы перед вызовом экземпляра диспатчим

получается в хуках компонента нужно диспачить?

ты немного запутался)

ты немного запутался)

вот и прошу подсказа)

получается в хуках компонента нужно диспачить?

Этот диспатч не

можно я опишу логику, а потом вы меня поправите?)

точнее даже не токен, а флаг authenticated

Сделай флаг в самом начале такой

описываю логику, а потом скорректируйте меня)

Получил правду и продолжаешь запрашивать данные, если просто

1) при входе в приложение идёт проверка токена в LocalStorage, если там есть токен, то отправляю его бэку по урлу, а там бэк разруливает - протух или нет токен, если не протух, то отдаёт 200 и я открываю приложения, дальше делаю запрос с токеном за данными пользователя, чтоб прогрузить их в приложение, если токен протух или его нет, то отправляю на авторизацию/регистрацию; 2) авторизация/регистрация - тут запрос прав доступа, если всё прошло успешно, то приходит 200, приложение открывается, токен сохраняется в LocalStorage, потом запрос за данными пользователя с токеном по урлу, данные приходят - приложение оживает с данными; 3) пользователь перемещается внутри приложения - я в хуках роутинге поверяю токен и по нему запрашиваю данные пользователя, если они нужны, если токен протух, то цикл входа повторяется;

можно токен сохранять во Vuex, и к LocalStorage обращаться, если только во Vuex токена нет

но задача такая, когда нажимаю F5, то идёт проверка токена, если его нет, то на страницу авторизация/регистрация, если он есть, то на стартовую страницу входа в приложение, а если я F5 нажал не на стартовой странице, то хочу после рефреша страницы остаться на этой же страницы, но меня перекидывает на стартовую

как исправить поведения роутинге в таком случае?

в первом сообщении ты все правильно расписал

в первом сообщении ты все правильно расписал

с учётом того, что такой опыт первый у меня)

Зачем если его нет регистрация строго?

Зачем если его нет регистрация строго?

если токена нет, то регистрация/авторизация, а если токен есть, то состояние роутинге нужно как-то сохранить

как исправить поведения роутинге в таком случае?

могу предположить, что у тебя хук роутинга выполняется раньше чем то место которое ты называешь "при входе в приложение", а это значит что ты не в том месте инициализируешь state vuex'а

Если его нет и находишься в личном кабинете каком-то , то да

могу предположить, что у тебя хук роутинга выполняется раньше чем то место которое ты называешь "при входе в приложение", а это значит что ты не в том месте инициализируешь state vuex'а

при входе в приложение, когда пользователь прошёл авторизацию, например, я пользователя перенаправляю на стартовый роут приложения, например на страницу - about

но есть и страница prices, на которой я нажал F5, и происходит рефреш страницы, токен есть, соответственно меня перекидывает на страницу входа в приложение - about, а нужно сохранить состояние роутинга

может в хуке компонента beforeDestroy сохранять в LocalStorage url?) но вроде как велосипедом пахнет)))

приветы!

Ты че . Зачем Урал сохранять?

приветы!

подключайся)

Url

new Vue({ el: '#windows', data: { windows: {}, newUrl: '' }, methods: { addWindow: () => { this.windows.push({ url: this.newUrl }); this.newUrl = ''; }, removeWindow: () => { } } }); не вижу this.windows - почему?

за вуе сижу 15 минут

Ты че . Зачем Урал сохранять?

а как сохранить стэйт роута при рефреше страницы?

а как сохранить стэйт роута при рефреше страницы?

роутер определяет какой роут загрузить по урлу

Во первых: что у тебя в this.$route ?

роутер определяет какой роут загрузить по урлу

каким образом?)

new Vue({ el: '#windows', data: { windows: {}, newUrl: '' }, methods: { addWindow: () => { this.windows.push({ url: this.newUrl }); this.newUrl = ''; }, removeWindow: () => { } } }); не вижу this.windows - почему?

ответ потому что я тупой

спасибо!

в объект то пуш делать

Во вторых, не надо все Приложение переадресовывать. Ты сам и ответил

Во первых: что у тебя в this.$route ?

в какой момент?

в объект то пуш делать

сам ответил)))

Во вторых, не надо все Приложение переадресовывать. Ты сам и ответил

не понял тут?)

у приложения есть урл входа, при получении прав доступа

и при рефреше перекидывает на урл входа или страницу авторизации, в зависимости от наличия токена

а теперь после выполнения метода ничего не меняется на странице, хотя все реактивно должно быть. почему теперь я тупой?

const windowsApp = new Vue({ el: '#windows', data: { windows: {}, newUrl: '' }, methods: { addWindow: () => { this.windows[new Date().getTime().toString()] = { url: this.newUrl }; this.newUrl = ''; }, removeWindow: () => { } } });

new Date().getTime().toString() - для теста

чтобы никто не орал)

Сори, не у компа. Не удобно. Создай правила в самом роутере

В доках есть

const windowsApp = new Vue({ el: '#windows', data: { windows: {}, newUrl: '' }, methods: { addWindow: () => { this.windows[new Date().getTime().toString()] = { url: this.newUrl }; this.newUrl = ''; }, removeWindow: () => { } } });

не понимаю, какую цель преследуешь?)