Vue how to redirect user after login to main components

Question

I'm just started learning Vue and I don't understand how to make "structure" of components, I mean: my login page should be as a main component which is loaded as first page in application, then after success login user should be redirected to main components (core application).

Can someone simply explain how to do that? What should be in App.vue? Where to place router-view responsible for login-view and where to place routers-views which are responsible for views which can be showed just after loggin?

Here's couple of pieces of my code:

App.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>

That's my routes.js, every component has same structure: (basically that particular component should be loaded after loggin)

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

and here's my Login component:

<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
            })
        }
    }
}

With those setting, my Login component is loaded when user isn't authenticated, but the content appear on components which shouldn't be available to see before loggin.

I've seen Redirect to requested page after login using vue-router but I don't get it.

Answer 1

Redirecting to the home page after successful login can be done in the method itself.

    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'})
              }
          })
    }

Now you need to handle the access to the login page. I managed this by adding meta values to the router objects.

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

• public : If this value set to true then, this page can be accessed by without authentication.
• disableIfLoggedIn: If this value is set to true, then the page cannot access once authenticated.

These values are checked and managed the redirection in the beforeEach section like follows

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();
});

This will check before every router navigation and control the access to the routes.

Note

The redirect section can be removed. This is to handle redirect to specific path after login.