登陆/登录页面的Vue路由器设置,然后导航后端

Question

通常,在应用程序中,我会将我的部分放在模板文件中.

就像是:

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

根据路线(登录),我想使用不同的模板.

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

我以为我可以创建两个组件:比如登陆页面和后端.路线:[

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

后端可能看起来像我想要的:

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

但是,我如何指定路由是\ dashboard,我应该渲染仪表板组件？

Answer 1

文件路由器/ 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>

创建文件Login.vue

完成登录视图和登录localStorage中的set cookie,然后重定向到路径 /

创建文件Page.vue

使用页眉和页脚完成仪表板视图并包含<router-view>标记

在main.js中,使用这种类型的逻辑来检查用户是否在每次转换之前登录并且服务器在api调用时给出401状态,然后重定向到登录页面

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 是变量来检查令牌是否存在于localstorage中