tnbapp/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/layout/index.vue'
import Home from '@/views/home/index.vue'
// import checkPower from '@/utils/check-power.vue'

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
    meta: { title: 'HerTube' },
    children: [
      {
        path: '/',
        name: 'Index',
        component: Home,
        meta: { title: 'HerTube' }
      },
      {
        path: '/hot',
        name: 'Hot',
        component: () => import('@/views/home/status.vue'),
        meta: { title: 'HerTube 状态' }
      },
      {
        path: '/subscribe',
        name: 'Subscribe',
        component: () => import('@/views/home/subscribe.vue'),
        meta: { title: 'HerTube 订阅' }
      },
      {
        path: '/history',
        name: 'History',
        component: () => import('@/views/home/history.vue'),
        meta: { title: 'HerTube 播放历史' }
      },
      {
        path: '/playlist',
        name: 'Playlist',
        component: () => import('@/views/home/playlist.vue'),
        meta: { title: 'HerTube 稍后再看' }
      },
      {
        path: '/video/:id',
        name: 'Vide',
        component: () => import('@/views/video/video.vue'),
        meta: { title: '播放' }
      },
      {
        path: '/user/setting',
        name: 'UserSetting',
        component: () => import('@/views/user/setting.vue'),
        meta: {
          title: '个人设置',
          requireAuth: true
        }
      },
      {
        path: '/vip',
        name: 'VIP',
        component: () => import('@/views/vip/index.vue'),
        meta: {
          title: 'VIP'
        }
      },
      {
        path: '/vip/pay',
        name: 'VipPay',
        component: () => import('@/views/vip/pay.vue'),
        meta: {
          title: 'VIP'
        }
      },
      {
        path: '/user/:id',
        name: 'User',
        component: () => import('@/views/user/index.vue'),
        meta: { title: '个人主页' }
      },
      {
        path: '/live',
        name: 'live',
        component: () => import('@/views/live/index.vue'),
        meta: { title: '直播' }
      }

    ]
  },
  {
    path: '/studio',
    name: 'Studio',
    component: () => import('@/layout/studio.vue'),
    meta: { title: '创作中心' },
    children: [
      {
        path: '/studio',
        name: 'StudioIndex',
        component: () => import('@/views/studio/index.vue'),
        meta: {
          title: '个人主页',
          requireAuth: true
        }
      },
      {
        path: '/studio/upload',
        name: 'Upload',
        component: () => import('@/views/studio/upload.vue'),
        meta: {
          title: '投稿',
          requireAuth: true
        }
      },
      {
        path: '/studio/post',
        name: 'Post',
        component: () => import('@/views/studio/post.vue'),
        meta: {
          title: '稿件列表',
          requireAuth: true
        }
      },
      {
        path: '/studio/comment',
        name: 'Comment',
        component: () => import('@/views/studio/comment.vue'),
        meta: {
          title: '评论',
          requireAuth: true
        }
      },
      {
        path: '/studio/admin/invitation',
        name: 'invitation',
        component: () => import('@/views/admin/invitation.vue'),
        meta: {
          title: '邀请码',
          requireAuth: true
        }
      },
      {
        path: '/studio/admin/examine',
        name: 'Examine',
        component: () => import('@/views/admin/examine.vue'),
        meta: {
          title: '审核视频',
          requireAuth: true
        }
      },
      {
        path: '/studio/admin/userlist',
        name: 'Examine',
        component: () => import('@/views/admin/user-list.vue'),
        meta: {
          title: '用户列表',
          requireAuth: true
        }
      },
      {
        path: '/studio/admin/websetting',
        name: 'Examine',
        component: () => import('@/views/admin/web-setting.vue'),
        meta: {
          title: '网页设置',
          requireAuth: true
        }
      },
      {
        path: '/studio/admin/category',
        name: 'Examine',
        component: () => import('@/views/admin/category.vue'),
        meta: {
          title: '分区设置',
          requireAuth: true
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login.vue'),
    meta: {
      title: '登录'
    }
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue'),
    meta: {
      title: '404'
    }
  }

]

const router = new VueRouter({
  mode: 'history',
  routes
})

// 路由导航守卫
router.beforeEach((to, from, next) => {
  // const token = window.localStorage.getItem('user')
  // console.log(this.$store.state.webInfo.name)
  // router.app.$options.store
  // 获取网页信息
  /*
  // TODO 网站信息暂时不从后端获取
  if (router.app.$options.store.state.webInfo.name == null) {
    fetch(`/api/media/web/info`, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8'
      },
      method: 'GET',
      credentials: 'include'
    }).then(response => response.json())
      .then(json => {
        router.app.$options.store.state.webInfo = json.data
      })
      .catch(e => {
        return null
      })
  }*/

  // 路由发生变化修改页面 title
  if (to.meta.title) {
    document.title = to.meta.title
  }

  const vuexStore = router.app.$options.store
  // router.app.$options.store 就是 this.$store
  /* if (checkPower.updateUserRole(vuexStore.state.user.userInfo)) {
    vuexStore.state.user.userInfo.role = 'ROLE_USER'
    vuexStore.commit('SET_USER_INFO', vuexStore.state.user.userInfo)
  }*/

  // const date = new Date().getTime()
  if (vuexStore.state.user.userInfo != null) {
    if (to.path === '/login') {
      return next({ path: '/' })
    }
    return next()

    // TODO 不判断用户是否过期
    /* if (vuexStore.state.user.userInfo.expireTime > date) {
      if (to.path === '/login') {
        return next({ path: '/' })
      }
      return next()
    } else {
      vuexStore.commit('user/SET_USER_INFO', null)
      return next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }*/
  } else {
    if (to.meta.requireAuth) {
      return next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      return next()
    }
  }
})

export default router