Блог

недавно я решил перенести некоторые из своих приложений на Vue, чтобы изучить фреймворк, но я как бы застрял на чем-то.. таким образом, в основном после того, как я войду в систему в режиме входа, меня должны перенаправить на мой домашний вид, но когда я вхожу в свое приложение, оно остается в режиме входа, оно работает только после того, как я уже вошел в систему и нажал кнопку входа. Состояние в магазине явно меняется, я ясно вижу, как моя навигационная панель реагирует на изменения. Домашний вид, конечно, работает после того, как я вручную перейду по пути»/», но это не очень хороший пользовательский интерфейс, не так ли?.

Я вывел возможные причины только для одного. Навигаторы. И я не знаю, как найти обходной путь, я потратил слишком много времени на размышления об этом, и я мог бы использовать руку, чтобы указать мне правильное направление. Вот некоторые фрагменты кода :

Методы входа в систему:

 methods: {
...mapActions({
  signIn: 'signIn'
}),
handleSubmit() {
  const data = {
    email: this.email,
    password: this.password,
  };
    this.signIn(data).then(() => {
      this.$router.push({path: '/'})
    }).catch(e => {
      console.log(e)
    })
},
 

Действия Vuex:

    async signIn({dispatch},data) {
        const res = await axios.post("auth", data);
        dispatch('auth', res.data.token)
    },
    async auth({commit, state}, token) {
        
        if(token) {
            commit('token', token)
        }

        if(!state.token) {
            return
        }

        commit('token', token)
        
        try {
            const res = await axios.get('auth')
            commit('user', res.data)
        } catch (e) {
            commit('user', null)
            commit('token', null)
        }

    },
 

Соответствующий геттер Vuex:

 isAuth: (state) => {
        console.log({token: state.token, user: state.user})
        return state.token amp;amp; state.user
    },
 

Маршрутизатор/Navguard :

 { 
    name: 'Home',
    path: '/', 
    component: Home,
    beforeEnter: (to, from, next) => {
        if(!store.getters['isAuth']){
            next({path: '/login'})
        }else {
            next()
        }
    } 
},
 

Попробуйте await также выполнить отправку в функции входа:

 async signIn({dispatch},data) {
    const res = await axios.post("auth", data);
    await dispatch('auth', res.data.token)
}
 

Если вы не дождетесь отправки, это user все равно может null произойти, когда вы позвоните this.$router.push({path: '/'}) , и охранник маршрута остановит вас / .

Я думаю, что это проблема , связанная с обещанием, действие this.$router.push({path: '/'}) может быть выполнено раньше, чем axios.post("auth", data); , я обычно решаю эту проблему, обрабатывая в методе:

 handleSubmit() {
  const data = {
    email: this.email,
    password: this.password,
  };
    const res = await this.signIn(data)
    if (res?.response.status === 200) { // change to the valid condition when success
      this.$router.push({path: '/'})
    }
},
 

а затем в действии vuex вы также должны вернуть ответ

     async signIn({dispatch},data) {
        const res = await axios.post("auth", data);
        dispatch('auth', res.data.token)
        return res;
    }
 

кроме того, на всякий случай, если проблема заключается в неправильном отображении компонента , вам следует проверить свой <router-view .. , добавить key реквизит, чтобы убедиться, что он правильно перенаправлен, например:

 <router-view :key="route.path" />