Vue как перенаправить пользователя после входа в основные компоненты

Question

Я только начал изучать Vue, и я не понимаю, как сделать «структуру» компонентов, я имею в виду: моя страница входа должна быть в качестве основного компонента, который загружается как первая страница в приложении, а затем после Успешный вход пользователя в систему должен быть перенаправлен на основные компоненты (основное приложение).

Может кто-нибудь просто объяснить, как это сделать? Что должно быть в приложении. vue? Где разместить router-view, отвечающий за login-view, и где разместить routers-view, отвечающие за представления, которые могут быть показаны сразу после входа в систему?

Вот пара фрагментов моего кода:

Приложение. vue

<template> 
    <div>

      <left-menu></left-menu>
      <nav-menu></nav-menu>
      <router-view></router-view>

    </div>

</template>

<script>
import NavMenu from './NavMenu.vue';
import LeftMenu from './LeftMenu.vue';


export default {
  components: {
    navMenu: NavMenu,
    leftMenu: LeftMenu
  },
  computed: {
      auth() {
          return this.$store.getters.isAuthenticated;
      }
  }
}
</script>

Это мои маршруты. js, каждый компонент имеет одинаковую структуру: (в основном этот конкретный компонент должен быть загружен после входа в систему)

{
        path: '/orders', 
        component: Orders, 
        beforeEnter(to, from, next) {
            if (store.state.jwt) {
                next();
            } else {
                next('/login')
            }
        }
    }

и вот мой компонент Login:

<template>
    <div class="login-content">

        <form @submit.prevent="submit">
            <label>Podaj login</label>
            <input type="text" v-model="login">

            <br>

            <label>Podaj hasło</label>
            <input type="password" v-model="password">

            <button type="submit">Zaloguj</button>

        </form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            login: '',
            password: ''
        }
    },
    methods: {
        submit() {
            const formData = {
                login: this.login,
                password: this.password
            }
            this.$store.dispatch('login', {
                login: formData.login,
                password: formData.password
            })
        }
    }
}

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

Я видел Перенаправление на запрашиваемую страницу после входа в систему с использованием vue -router , но я не получил его.

Answer 1

Перенаправление на домашнюю страницу после успешного входа в систему можно выполнить в самом методе.

    submit() {
        const formData = {
            login: this.login,
            password: this.password
        }
        this.$store.dispatch('login', formData)
          .then(response=>{
              if(response.data.status){
                 this.$router.push({name:'home'})
              }
          })
    }

Теперь вам нужно обработать доступ к странице login. Мне удалось это, добавив meta значения к router объектам.

{
    name: 'login',
    path: '/login',
    component: Login,
    meta: {
        public: true,
        disableIfLoggedIn: true
    }
},

• public: если это значение установлено на true, то эта страница может быть доступна без аутентификации .
• disableIfLoggedIn: если для этого значения установлено значение true, то страница не может получить доступ после аутентификации.

Эти значения проверяются и управляются перенаправлением в * 1020. * следующий раздел

router.beforeEach((to, from, next) => {
    // if the route is not public
    if (!to.meta.public) {
        // if the user authenticated
        if (store.getters.isAuthenticated) {
            // continue to the route
            next();
        } else {
            // set redirect to path after login
            let redirect = {};
            if (to.name !== 'home') {
                redirect = {redirect: to.path};
            }
            // redirect to login
            next({name: 'login', query: redirect});
        }
    }
    // if the user is authenticated and the route is disabled for authenticated window
    if (store.getters.isAuthenticated && to.meta.disableIfLoggedIn) {
        // redirect to home
        next({name: 'home'});
    }
    next();
});

Этот параметр будет проверяться перед каждой навигацией маршрутизатора и управлять доступом к маршрутам.

Примечание

Раздел перенаправления могут быть удалены. Это необходимо для перенаправления на указанный c путь после входа в систему.