tnbapp/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import checkPower from '@/utils/check-power.vue'

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/layout/index.vue'),
    meta: { title: 'HerTube' },
    children: [
      {
        path: '/',
        name: 'Home',
        component: () => import('@/views/home/index.vue'),
        meta: { title: 'HerTube' }
      },
      {
        path: '/studio',
        name: 'Studio',
        component: () => import('@/views/studio/index.vue'),
        meta: { title: 'Studio' },
        children: [
          {
            path: '/studio',
            name: 'Post',
            component: () => import('@/views/studio/post.vue'),
            meta: {
              title: '稿件列表',
              requireAuth: true
            }
          },
          {
            path: '/studio/upload',
            name: 'Upload',
            component: () => import('@/views/studio/upload.vue'),
            meta: {
              title: '投稿',
              requireAuth: true
            }
          },
          {
            path: '/studio/statistics',
            name: 'Statisticss',
            component: () => import('@/views/studio/statistics.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: '/u/:userId',
        name: 'UserHome',
        component: () => import('@/views/user/home.vue'),
        meta: { title: '用户主页' }
      },
      {
        path: '/user',
        name: 'UserCenter',
        component: () => import('@/views/user/userindex.vue'),
        meta: {
          title: '个人中心',
          requireAuth: true
        },
        children: [
          {
            path: '/user/home',
            name: 'UserHome',
            component: () => import('@/views/user/home.vue'),
            meta: {
              title: '个人中心',
              requireAuth: true
            }
          },
          {
            path: '/user/setting',
            name: 'UserSetting',
            component: () => import('@/views/user/setting.vue'),
            meta: {
              title: '账户设置',
              requireAuth: true
            }
          },
          {
            path: '/user/favlist',
            name: 'UserFavlist',
            component: () => import('@/views/user/favlist.vue'),
            meta: { title: '收藏列表',
              requireAuth: true }
          },
          {
            path: '/user/playlist',
            name: 'UserPlaylist',
            component: () => import('@/views/user/playlist.vue'),
            meta: { title: '稍后再看',
              requireAuth: true }
          },
          {
            path: '/user/hislist',
            name: 'UserHislist',
            component: () => import('@/views/user/hislist.vue'),
            meta: { title: '历史记录',
              requireAuth: true }
          },
          {
            path: '/user/follow',
            name: 'UserFollow',
            component: () => import('@/views/user/follow.vue'),
            meta: { title: '关注管理',
              requireAuth: true }
          },
          {
            path: '/user/vip',
            name: 'UserVip',
            component: () => import('@/views/user/vip.vue'),
            meta: { title: '小会员',
              requireAuth: true }
          },
          {
            path: '/user/loginhistory',
            name: 'LoginHistory',
            component: () => import('@/views/user/LoginHistory.vue'),
            meta: { title: '登录历史',
              requireAuth: true }
          }
        ]
      },
      /*
      {
        path: '/user',
        name: 'User',
        component: () => import('@/views/user/index.vue')
      },
      {
          path: '/user/studio',
          name: 'StudioIndex',
          component: () => import('@/views/studio/index.vue'),
          meta: {
            title: '个人中心',
            requireAuth: true
          }
        },
        {
          path: '/user/upload',
          name: 'Upload',
          component: () => import('@/views/studio/upload.vue'),
          meta: {
            title: '投稿',
            requireAuth: true
          }
        },
        {
          path: '/user/post',
          name: 'Post',
          component: () => import('@/views/studio/post.vue'),
          meta: {
            title: '稿件列表',
            requireAuth: true
          }
        },
        {
          path: '/user/comment',
          name: 'Comment',
          component: () => import('@/views/studio/comment.vue'),
          meta: {
            title: '评论',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/invitation',
          name: 'invitation',
          component: () => import('@/views/admin/invitation.vue'),
          meta: {
            title: '邀请码',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/examine',
          name: 'Examine',
          component: () => import('@/views/admin/examine.vue'),
          meta: {
            title: '审核视频',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/userlist',
          name: 'Examine',
          component: () => import('@/views/admin/user-list.vue'),
          meta: {
            title: '用户列表',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/websetting',
          name: 'Examine',
          component: () => import('@/views/admin/web-setting.vue'),
          meta: {
            title: '网页设置',
            requireAuth: true
          }
        },
        {
          path: '/user/admin/category',
          name: 'Examine',
          component: () => import('@/views/admin/category.vue'),
          meta: {
            title: '分区设置',
            requireAuth: true
          }
        }*/
      {
        path: '/message',
        name: 'Message',
        component: () => import('@/views/message/index.vue'),
        meta: { title: 'Message' },
        children: [
          {
            path: '/message',
            name: 'Message',
            component: () => import('@/views/message/home.vue'),
            meta: { title: '消息主页' }
          },
          {
            path: '/message/setting',
            name: 'MessageSetting',
            component: () => import('@/views/message/setting.vue'),
            meta: { title: '消息设置' }
          }
        ]
      },
      {
        path: '/live',
        name: 'Live',
        component: () => import('@/views/home/live.vue'),
        meta: { title: 'HerTube 直播' }
      },
      {
        path: '/channel',
        name: 'Channel',
        component: () => import('@/views/home/channel.vue'),
        meta: { title: 'HerTube 分区' }
      },
      {
        path: '/mblog',
        name: 'Mblog',
        component: () => import('@/views/home/mblog.vue'),
        meta: { title: 'HerTube 状态' }
      },
      {
        path: '/zhihu',
        name: 'Zhihu',
        component: () => import('@/views/home/zhihu.vue'),
        meta: { title: 'HerTube 知乎' }
      },
      {
        path: '/playlist',
        name: 'Playlist',
        component: () => import('@/views/home/playlist.vue'),
        meta: { title: 'HerTube 稍后再看' }
      },
      {
        path: '/search/result',
        name: 'SearchResult',
        component: () => import('@/views/home/search-result.vue'),
        meta: { title: 'HerTube 搜索结果' }
      },
      {
        path: '/video/:id',
        name: 'Vide',
        component: () => import('@/views/video/video.vue'),
        meta: { title: '播放' }
      },
      {
        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: '/live',
        name: 'live',
        component: () => import('@/views/live/index.vue'),
        meta: { title: '直播1' }
      }
    ]
  },
  {
    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