Vue проблема роутера и vuex с перенаправлением на основе значения - PullRequest
Новая
       7

Vue проблема роутера и vuex с перенаправлением на основе значения

0 голосов
/ 08 января 2020

У меня есть приложение Vue, которое я пытаюсь сделать так, чтобы, когда пользователь не заплатил и пробная версия закончилась, они были перенаправлены на /billing и отображали сообщение об ошибке. Я также хотел бы, чтобы, если они заплатили или все еще находятся в испытательном сроке, они могли использовать приложение.

код storeUser в моем магазине. js

storeUser(state, user) {
      state.user = user
      state.isPaid = user.isPaid
      state.isTrial = user.isTrial
 },

данные, переданные в storeUser как «пользователь» 

{
  name: "Joe",
  isPaid: false,
  isTrial: false
}

Данные, отображаемые в моем хранилище vuex с помощью chrome vui extention 

{
  name: "Joe",
  isPaid: null,
  isTrial: null
}

Не уверен, почему данные вводятся неправильно, так как я могу console.log исправить данные в функции storeUser. Однако, если я загляну в пользовательскую часть, я увижу ее как правильные ложные значения. Когда я пытаюсь указать это в приведенном ниже коде для маршрутизатора vue, он говорит, что не может прочитать его, потому что он нулевой. Я предполагаю, что это просто асин c проблема.

состояние в хранилище. js

state: {
    token: null,
    isPaid: null, 
    isTrial: null,
    error: {
      registerErrorMessage: '',
      loginErrorMessage: '',
      resetError: ''
    },
    user: null
  }

main. js, который содержит мой vue router 

} else if(to.path != '/billing' && !(store.state.isPaid && store.state.isTrial)) {
    next({
      path: '/billings',
      query: {
         paid: false,
      }
  })

Может кто-нибудь определить потенциальную проблему или, возможно, решение моей проблемы? Этого кода должно быть достаточно, чтобы воспроизвести проблему, хотя в случае отсутствия я могу предоставить больше, нет репозитория publi c, в котором можно было бы показать остальную часть кода.

EDIT ** Итак, произошло нечто странное .. I Сейчас я вижу больше правильных данных, чем раньше (isPaid и isTrial действительны), однако я все еще не могу go на другие маршруты сейчас. Добавление вывода store.state в начале моего beforeEach 

{
  token: 'random string',
  isPaid: true,
  isTrial: false,
  error: {},
  user: {
    name: "Joe",
    isPaid: true,
    isTrial: false
  }
}

EDIT 2 **

storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

EDIT 3 ** Вот весь мой vue маршрут от основного. js

router.beforeEach((to, from, next) => {
  store.dispatch('tryAutoLogin')
  console.log(store.state) // this is test only not for prod
  if(!store.state.token && (to.path == '/login' 
    || to.path == '/signup' 
    || to.path == '/forgot' 
    || to.path == '/resend' 
    || to.path.includes('/confirmation/'))) 
  {
    return next()
  } else if (to.path == '/signup') {
    return next({ query: {plan: from.query.plan }})
  } else if(to.path != '/billing' && !(store.state.isPaid && store.state.isTrial)) {
    next({
      path: '/billing',
      query: {
         paid: false,
      }
  })
  } else if(store.state.token) {
    return next()
  } else {
    return next('/login')
  }
})

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

РЕДАКТИРОВАТЬ 4 **

У меня есть идея, но я не уверен, как ее реализовать. Используйте обещания, чтобы убедиться, что данные правильные. Моя путаница в части обещания заставляет их работать вместе. Поэтому я думаю, что мутация authUser затем каким-то образом делает действие storeUser обещанием, которое я могу выполнить в своих действиях beforeEach 

tryAutoLogin({commit, dispatch}) {
   const token = localStorage.getItem('token')
   if(!token) {return}
   commit('authUser',{
     token
   })
   dispatch('storeUser')
},


storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              companyName: res.data.user.company.companyName,
              role: res.data.user.role,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

Мутации 

authUser(state, userData) {
  state.token = userData.token
},
storeUser(state, user) {
  state.user = user
  state.isPaid = user.isPaid
  state.isTrial = user.isTrial
},

1 Ответ

0 голосов
/ 08 января 2020

Похоже, у вас много дублирующего и запутанного кода.

Почему в состоянии 2 из isPaid и isTrial в состоянии?

Вы также не использовали name свойство, предоставленное вами для функции commit.

Фиксация 

commit('storeUser', {
    name: res.data.user.name,
    isPaid: res.data.user.company.stripe.isPaid,
    isTrial: res.data.user.company.stripe.isTrial
});

const store = new Vuex.Store({
    state: {
        userName: '',
        isPaid: false,
        isTrial: false,
    },
    mutations: {
        storeUser(state, data) {
            state.userName = data.name;
            state.isPaid = data.isPaid;
            state.isTrial = data.isTrial;
        },
    },
});

Теперь вы получаете доступ к состоянию store.state.isPaid и store.state.isTrial.

Вы можете увидеть рабочий пример на этом jsfiddle . Если вы откроете консоль, вы увидите, как записывается текущее состояние.

...