Как передать данные в компонент, который используется повторно? - PullRequest
Новая
       27

Как передать данные в компонент, который используется повторно?

1 голос
/ 02 ноября 2019

Я настраиваю навигацию в моем SPA (vue), который использует хук beforeRouteEnter для вызова бэкенда и проверки подлинности пользователя.

При переходе со страницы входа на защищенную страницу, это перенаправляет на ту же страницу входа (если не аутентифицировано). Чтобы объяснить пользователю, что сначала он должен пройти аутентификацию, я хотел бы показать сообщение.

Используя props, передача данных на страницу входа работает. Однако, если это перенаправление происходит из / login ==> / protectedRoute ==> / login, никакие изменения не вносятся, потому что vue повторно использует этот компонент. В большинстве случаев такое поведение желательно, но в этом случае это не так.

beforeRouteEnter выглядит следующим образом. 

beforeRouteEnter (to, from, next)  {
  return axios.post('/api/auth')
  $.then(result => {
    next()
  })
    .catch(err => {
    next({name:"Login", params:{auth: "false"}});
  })
}

Если я перейду с '/guestRoute' на '/protectedRoute'все работает и данные перенаправляются в компонент '/login' после перенаправления.

Thx

1 Ответ

0 голосов
/ 02 ноября 2019

Как правило, это можно сделать с помощью управления состоянием, например vuex для vue. Вы можете вызвать присвоить ошибки уровня приложения, и они будут доступны всем вашим компонентам.

Vuex - это шаблон управления состоянием + библиотека для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов в приложении, с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом.

Это означает, что данные вашего приложения будут управляться одним хранилищем. Ваше приложение может иметь хранилище, подобное этому 

export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user : {},
    error: ''
  },
  mutations: {

  },
  actions: {

  },
  getters : {

  }
})

Таким образом, вы можете проверить, назначать ли какие-либо ошибки свойству error в хранилище и добавить проверку в компоненте, если есть ошибка или нет.

...