Vue Router setup for Landing/Login Page, and then backend with navigation

user_1093111 0
Viewed 9859

Normally, in an app, I would put my partials in a template file.

Something like:

<app>
    <nav></nav>
    <sidebar></sidebar>
    <router-view></router-view>
    <footer></footer>
</app>

Depending on the route (login), I want to use a different template.

<app>
    <login></login>
</app>

I was thinking I could create two components: say landing-page and Backend. routes: [

    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'content',
      component: Backend
    }
  ]

Backend could look like I want it to: 

<backend>
    <nav></nav>
    <sidebar></sidebar>
    <router-view></router-view>
    <footer></footer>
</backend>

However, how would i specify that then the route is \dashboard, I should render the dashboard component?

vue.js
1 Answers

File router/index.js

export default new Router({
  routes: [
    {
      path: '/',
      component: Page,
      children: [
        {
          path: '',
          name: 'Dashboard',
          component: Dashboard,
          auth: true
        },
        {
          path: 'users',
          name: 'Users',
          component: Users,
          auth: true
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

App.vue

<template>
  <div class="main-component">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

Create File Login.vue

Complete Login View and When Logged in set cookie in localStorage, then redirect to path /

Create File Page.vue

Complete Dashboard view with Header and Footer and Include a <router-view> tag

In main.js, Use this type of logic to check user is logged in before each transition & if server gives 401 status on api call, then redirecting to login page

router.beforeEach(function (to, from, next) {
  console.log('beforeEach', to.path + ' - Auth: ' + auth.user.authenticated)
  if ((to.path !== '/login' && to.path !== 'login') && !auth.user.authenticated) {
    next({ path: '/login' })
  } else if ((to.path === '/login' || to.path === 'login') && auth.user.authenticated) {
    next({ path: '/' })
  } else {
    next()
  }
})



  // Whenerver Server Gives 401 Status Code, it logouts and redirect to login page
Vue.http.interceptors.push(function (request, next) {
  next(function (response) {
    if (response.status === 401) {
      let msg = response.body.returnMessage
      localStorage.setItem('logoutReason', msg)
      auth.logout()
    }
  })
})

auth.user.authenticated is variable to check whether token exists in localstorage or not

user_42349490
Related